Text Field HTML Input Types (Textfield Type, Date Picker, Number/Password Field, File Selector)

rp-7
#1

In Axure 7.0, Update To Latest Version | Axure, you can now set the HTML input field type on Text Fields.

Some of these, like Email and Phone Number, are definitely most helpful for mobile site building. And others like Date and Time aren’t supported by all browsers (i.e. IE). However, if you can live with the shortcomings, this can be a super quick way to get your necessary Date Picker, Password, or Number Field into your HTML.

TextFieldInputTypes.png971×843

Here is the complete list and quick description from the website, http://www.axure.com/widgets/text-field:

Text: Basic text entry
Password: Masks text being entered
Email: Prompts email keyboard
Number: Prompts numeric input
Phone Number: Prompts the dial pad
URL: Prompts the url entry keyboard
Search: Adds search button to keyboard
File: Adds a file upload button to the design
Date: Prompts the date selector
Month: Prompts the month and year selector
Time: Prompts the time selector on mobile

Check out different browser’s support of these HTML5 elements here: HTML5test - How well does your browser support HTML5?.

#2

For the text field of Type “Number” I can set conditions on a text change [really number change] on the widget (via typing in the input field), but I have yet to find a way to set conditions on a text change [really number change] that happens via clicking on the spin buttons that are displayed inside the field. How do I do that?

#3

Sorry, this isn’t possible yet. We have an open issue for this. Unfortunately, the solution is not readily apparent, but we’ll keep looking at it.

#4

Here is a great photo posted by Mike Gray here, File Upload/ File Picker, showing the different input types as Mac OS Chrome and iOS Safari display them.

#5

I’m not able to get date input from the native date picker and store it as a global variable. When I step through the code using Firebug, I get the following error: “Uncaught InvalidStateError: Failed to execute ‘setSelectionRange’ on ‘HTMLInputElement’: The input element’s type (‘date’) does not support selection.” Pic: https://www.dropbox.com/s/8abz0l793tor6rl/Screen%20Shot%202014-03-26%20at%2012.11.46%20AM.png

#6

Is there a way to make the file input button and dialog hidden? The button is… uhhh… underdesigned. I want to use my own button but utilize the functionality here.

#7

thanks for info :slight_smile:

#8

How can someone convert the time that is in a Textfield of type Time, into a String ?

#9

Developed a hi-fidelity solution using Axure + JS if y’all are interested:

Hi-Fidelity File Upload Prototype in Axure: A Development Note from Nick Bewley

#10

Regarding the File Picker, how can we grab the file name it shows? I’ve tried just about everything I can think of to make it a variable for later use, but it appears that the text field remains empty

#11

@gregorsmith I updated the post, preview, and attached files showing a method in which you can transfer the value of the file path into a global variable to use elsewhere in the prototype. Check out the post on my site linked above for a detailed description, preview, and to download the associated files.

Hope it helps out in your prototyping.

Thanks,
Nick Bewley

#12

@nickbewley for the second part of your post where you set a global variable within Axure to some value determined from your JS, you could instead do this:

$axure.setGlobalVariable(‘YourVariable’,‘NewValue’)

From my testing this correctly updates variables within Axure without issue.

#13

@nkrisc thanks good to know other ways to use JS with Axure, as well.

Nick

#14

Thanks Nick, very much appreciated

#15

Hi, I’m having difficulty setting the value on a date format text field using an event. Is this a know bug and is there a work-around?

#16

Hi Cybertrack,

Are you trying to dynamically set text on a Text Field? This should be working properly via the Set Text Action; however, I’d be happy to look over your implementation. Could you post the .rp file that demonstrates this error? Thanks!

Alex

#17

Max characters is nice to have.
Feature requests:
It would be great if the Axure properties panel allowed us to set the min/max value for Number element.
And, if the datalist paired with the input element were a possibility, we could have a hybrid text input and dropdown list.

Here is a nice resource from Martin Polley: Forms: The Complete Guide–Part 2 « Boxes and Arrows

#18

I really like this feature, but now that I have added the type of text field to the widgets, how do I get the specification to appear in the Word annotations? I don’t see any logical options, and I can’t find any documentation that explains how to do it.

#19

Hi LisaGDC,

The most direct way to do this will be to manually include a note on your text field widget specifying the input type. By default, any widgets that have notes will be included in the generated “Widget Table” section of your documentation. It sounds like you’re looking for something more automated, so I’ll be happy to submit that as a feature request to my product manager.

Regards,
Jonathan

#20

If I add a text box with an input type of password, is there a way I can implement a “show/hide” feature on the textbox? So when the user clicks “show” it turns the little dots into text and when they click “hide” it turns the text back into the little dots?