Html input number is not getting numeric keyboard input - html

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.

Related

Chrome blocks mouse interaction for autofilled input

I have a simple registration form based on Material UI and React Final Form.
Email and password inputs are filled automatically by Chrome autofill if it is possible. The email field has autofocus on it. When the form is autofilled, inputs become "blocked" for mouse interaction (I cannot not place or see caret, cannot select part of email, no autofocus is applied), yet it is available for drag-and-drop copy with mouse and keyboard interaction. I have no idea how can this happen and do not understand, how to provide code for reproduction. Maybe some autofocus issue? Hope that anyone could help.

Hide Keyboard with onFocus event

I know it sounds a bit confusing, but I have an angular app that is supposed to run only on a mobile device with a barcode reader that automatically writes what it reads inside the focused input field.
I setted the app so that when the page is loaded my input field has focus and I want that the soft keyboard to be invisible so the user cannot manually write in this field.
The flow should seem like this: input -> autofocus -> (onFocus)="hideKeyboard()"
Autofocus is a custom directive that sets the dom element to be the focus in ngOnInit.
Thanks in advance for any tip.
There's a start here in this project, but when you click outside of the input (in the button) lose focus and the keyboard is hidden again. But yet, it's a start...
Try something like this.
<input id="id1" class="hidekeyboard"/>
$('#id1').<input_type>({
/* options */
});
$('.hidekeyboard').on('focus',function(){
$(this).trigger('blur');
});

Focus html mobile

I am looking for a way to place the focus on an input field, without having the keyboard of the phone shown. The same as autofocus but after the page is initialised. Not focus() because like I said I don't want the keyboard to be shown. Does anyone know a way to do that? I am working with angular 5 if it can help. Thanks.
Nevermind. I found a way using a Timeout of about 100 milliseconds. On click I put the input field in readonly, which does not show the keyboard, then after the timeout, I remove the readonly allowing the input but not the printing of the keyboard.

hide android keyboard on focus

I have a problem with my webapp.
Is there a way to hide the android keyboard on text input focus without losing the focus on the input?
Focus on page load works fine, because the field is focused and no keyboard is shown. I want the same behavior after re-focus on input.
Thank You
Maybe you should give keyboard customizing apps a try...might work. I personally prefer Redraw Keyboard, but there are many out there to choose from.

Autofocus text field on mobile, but no keyboard?

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