I'm working on updating some form inputs to HTML5. I'm not interested in validating the data so much as having the numeric key pad on mobile devices. Input type 'tel' seems to do what I want, I get the numeric keypad on iPad/mobile. Input type 'number' will also give me the numeric keypad, but it also includes the spinner box which I don't want.
What I want to know is if it's safe to use type="tel" on a credit card input? Or should I use type="number" and try to disable the spinner somehow. I was reading that disabling the spinner can crash Chrome which isn't a trade off I'm willing to make.
Also, for the time being we're using the exact same site for mobile and non-mobile users.
I looked at this and just tried this on my Xoom with the built in browser and FF mobile (with a desktop UA string) and the tel input would seem to work just fine for this.
Related
I'm looking for another set of eyes to take a look at the html and css of this page https://www.smartcrowd.ae/e-book/ on their iphone.
For some reason on Iphones only the form will not allow the user to tap into the phone number field. No matter where you tap in the input field, it will not allow you to type anything.
On safari, on desktop, it works but only if you enter the country code first.
It's working fine on google chrome, and firefox and I just can't find what the issue is.
The form is using a third-party plugin which generates the country code field, which seems to be a problem. If I deactivate the plugin the phone number input field works fine.
I've been racking my brain for the last day trying to figure this out.
Here is the input type number
<input type="Number" id="yPos" />
it is working fine and i am able to change it through mouse
But it is not getting numeric input from keyboard. How can i enable it?
Edit:
I found that UnitywebGL is creating this problem otherwise the keyboard input is working correctly in html controls.
Actually there is no issue with the html input field. It was related to the unity webgl:
Keyboard input and focus handling. By default, Unity WebGL will
process all keyboard input send to the page, regardless of whether the
WebGL canvas has focus or not. This is done so that a user can start
playing a keyboard-based game right away without the need to click on
the canvas to focus it first (source).
So the Unity canvas was consuming my all keyboard input. No matter I tried to enter/select my input control, it will not get input from keyboard. So I used
WebGLInput.captureAllKeyboardInput
to activate/deactive unity canvas input based on user selection.
First, correct the form. The type should be "number" without caps, i.e:
type="number"
Also check if you have turned off the num lock.
My code is very simple:
<input type="date">
While I run it in Firefox and Chrome I get two different designs:
Firefox:
Chrome:
Not only design is different, but the functionality also little bit different. In Mozilla when I click inside the date box it will show date, but in Chrome if we want date box we should click on drop down arrow symbol.
Is there any way to change the functionality and design so that it works and looks the same in both browsers?
It is different from one browser to another. However end result will be added values to the input field.
The control's UI varies in general from browser to browser
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Customized DatePicker
If you need this field should act same as every browser, please use a custom Javascript generated date picker.
https://jqueryui.com/datepicker/
18+ Best Free Date Pickers In Pure JavaScript And CSS - CSS Script
https://fengyuanchen.github.io/datepicker/
On iOS 8.0 devices when in Safari, users can enter additional characters to input fields with a max-length attribute.
Steps to Reproduce:
Create a html page with a input field that has a max-length attribute
Navigate to the page on an iOS device running iOS 8.0 or later.
Fill the input field with characters until you reach the max-length value
Move the writing cursor to somewhere in the middle of the entered characters
Enter additional characters. This will then make the length of the input value exceed the max-length attribute.
I used the following site to replicate this issue: http://www.wufoo.com/html5/attributes/03-maxlength.html
Should also note that textarea tags behave normally. I only noticed this on input tags.
I've confirmed this only occurs on iOS 8.0 devices.
I've submitted this bug to Apple via the Bug Tracker, but was wondering if anyone else ran into this issue and if so, if they discovered a solution/workaround.
As part of my login and registration forms, if there are errors then it will autofocus the related field. Actually, it not as simple as I thought. Let me try to explain!
Basically, on this project, pages are loaded with AJAX. Forms may include an autofocus attribute. This works great, but on mobile it just shows the cursor without bringing up the keyboard, meaning you still have to tap the input to start typing.
Am I missing something, or do I have to double-up the focussing with something like
document.querySelector("[autofocus]").focus();
// with appropriate verification that the element exists, of coursr
In mobile devices (at least in Apple's Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, and I don't think there is much you can do about it.
http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard