I have a website with a form to capture a phone number. The designer decided to make the phone number field a series of 10 input fields, each field allowing a maximum of 1 digit.
It is very frustrating to type in my phone number via an ipad. This is the process for entering a phone number:
touch the field for digit 1
alpha keyboard comes up
toggle to numeric keyboard
press a digit
keyboard disappears
Repeat steps 1 to 5 for remaining digits 2 to 10.
How do I force the keyboard to always be visible and in numeric mode? Then onkeyup on each digit field, to automatically focus on the next digit field?
I do not have the option of re-designing this interface.
Temporary solution
I'm going to create 1 text input field for all 10 digits, but make border and background transparent. Then I'm going to use a background image to display 10 separate fields. But I still don't know how to force the ipad keyboard to go into numeric mode by default.
I believe you can use an html5 doctype and <input type="number" /> ref to make tablets and smart phones display a numeric keyboard automatically.
Related
I am writing a web-based quiz application which involves users in a series of answers arranged in a grid. This is implemented with a <table> containing lots of text fields (<input>).
These answers all start with lower case letters, but while testing I have discovered that on Android devices, the on-screen keyboard opens by default with the Shift key selected, thus automatically capitalising the first letter of each text field. This behaviour quickly becomes annoying when trying to complete this quiz, as every time you select a new cell in the table, you first have to deselect the shift key before you can type the answer.
Is there anything I can do to request that Android launches the keyboard without the Shift key selected?
I have a form which contains a lot of individual fields which contain numeric values. The issue I have is that on an iPad the on-screen keyboard is split between an alphabetic and numeric one like so:
The issue is that when switching between each individual form field, the iPad reverts to the alphabetic keyboard which is not disastrous but definitely inconvenient for the end user. Is there anything I can do to tell iPad which keyboard to show for a specific input type or some other way of keeping the numeric keyboard for certain form elements?
I'm specifically referring to developing for the web and not iOS apps. I'm sceptical and so far Googling has not brought up any results but I wonder if there is an input type that iPad might recognise as numeric automatically.
Change your input type. Instead of using a text input try one of the following to bring up the special keyboard (note: this is not unique to the iPad). This is going to be device-dependent and be supported depending on the device used.
<input type="number">
Shows the number pad
<input type="email">
Shows the text pad with the # symbol
<input type="url">
Shows the text pad with the .com button (if available)
<input type="text">
Shows the standard text pad
Use HTML5 field types
Change the field type:
<input type="text" name="SomeField">
To:
<input type="number" name="SomeField">
This should make the iPad and phones default to the numeric input pad.
http://www.w3schools.com/html/html5_form_input_types.asp
I have an html5 number input: <input type="number" />
I would like it to accept fractions and mixed numbers, such as 38 1/2 as well as whole numbers and decimals.
I parse the fractions server side.
Currently, when the input loses focus, the browser changes the input to 38.
A current workaround is using a plain text input, but I would like the benefits of using type="number" such as specific keyboards on mobile.
The <input type="number"> element is defined to create a browser-dependent browser-locale-dependent input control for entering numbers. There is no way to change this in your document, except in the sense that you can use attributes to specify the range and precision. So a browser could accept 38 1/2 and convert it internally to 38.5, but there is no way to say that it should, still less force it to do so. Moreover, the internal format of the numbers (as passed to the server) is defined strictly; it cannot be 38 1/2 for example.
So you need to use plain text input or some special widget (programmed in JavaScript). You can use the pattern attribute to specify the allowed format somehow, at least the allowed set of characters; this may or may not affect the on-screen keyboard displayed on touch devices (it probably won’t, for current devices).
We recently ran into the same issue.
Our goals were ...
Allow users to enter fractions, decimals, and integers on all devices
Display the numeric keyboard on mobile devices
If we simply used type='number', most desktop browsers would prevent us from entering the slash character. In mobile Safari, we were able to enter a slash (e.g., 2/3), but the browser converted the value to an empty string since it wasn't strictly numeric.
Our solution has been to temporarily change the input type to number for devices that we want to display the numeric keyboard.
Our solution looks like:
var elmInput = document.getElementById("elmID");
if (/(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent)) {
elmInput.setAttribute("type", "number");
elmInput.focus(); // brings up numeric keyboard
setTimeout(function () {elmInput.setAttribute("type", "text"); }, 200);
}
We have tested on several iOS devices, and we are seeing the intended behavior. Obviously, this solution is limited to these devices. Also, in the unlikely event that the user submits the form in less than 200 milliseconds, he will run into the empty string problem previously mentioned.
Our situation is obviously unique since we're only dealing with one element that we can trigger focus. However, a similar approach could work by using a CSS class selector. You could set type to number for mobile devices, and then change back to text when focused.
I'm building an HTML page to be viewed in mobile Safari [and other platforms]. The page lets the user specify several start and end times. They have to input at least two times, and possibly more depending on their situation.
I want the user to be able to input their times as numbers and punctuation using the numeric-SHIFT mode keyboard, i.e. the user will see fields like this:
And they'll get the numeric-SHIFT keyboard when they focus into the field:
Won't work:
<input type="time"> (and related datetime types) is not an option. The scrolly-wheel is unacceptable from an HCI perspective, particularly for repeated entries.
<input type="number"> does the right thing at first. It triggers the keyboard in numeric-SHIFT mode, i.e. the numeric & punctuation portions are visible by default. But when you exit the field, mobile Safari strips out punctuation (i.e. the colon). I tried turning off validation in the form using novalidate but that didn't work.
<input type="text" pattern="[0-9]*"> triggers the telephone keyboard with no way to enter the colon character.
I may just need a different RegExp in the PATTERN attribute, but each one I've tried triggers the normal alpha keyboard, and the user has to hit a key to get to the numeric-SHIFT keypad.
Can anyone tell me how to force the keyboard into numeric-SHIFT display without triggering harsh validation rules on the user's input?
Take a look at jQuery Mobile DateBox. here. Its possible you might want to rethink text input here. Maybe you want to go with a picker. Sencha Touch also has a DatePicker. I wrote an extension that implements a timepicker object. I'll throw it up on GitHub if you need me to.
In Windows 7, you can configure keyboards so that you can type in different languages. To switch "virtual" keyboards, you have to click the little icon in the task bar and select the language in which you want to type.
I have two text boxes on a page, one is for typing English letters and the other is for typing Korean Hangul and Hanja. I would like users to be able to click into one, type English, and click in the other and type Korean without having to switch keyboards in the task bar (or optimally without even having alternate keyboards set up). The user will be switching languages often, so it will be highly inconvenient to have to switch manually every time.
Is there a way to specify for a certain textbox that you want the keyboard for that textbox to be a specific one?
In theory there is a CSS property called ime-mode which should let you control the behavior of input tags:
<input id="english" style="ime-mode: disabled">
<input id="korean" style="ime-mode: active">
The problem is, browser support is very limited (at least that is what MDN says) and it might not just work for certain web browser/Operating System combinations (i.e. won't run on Linux).