I am developing an on-screen keyboard. I want to disable keyboards of mobile devices while the osk is open. One way is to make input read-only, so that focusing on it not opening the keyboard. But using that solution, the user can't change cursor pointer (and also does not see any cursor while writing with osk) and can't select one part of text to delete.
Is there any other solution to stop mobile device keyboard from openning while focusing on input? Something like a specific attribute or styling value or etc.
Thnaks in advance. TG.
// UPDATE
one solution with readonly
EDIT:
Okay, to hide the keyboard for mobile users is not something you can prevent directly, but there is an alternative.
The "OnFocus" Event activates when a specific elements gets focused. this way you can add a bit of code to prevent a mobile keyboard from popping up.
this way we can add the "Blur()" method to it.
so it would look something like this:
<input type="text" name="noKeyboardForMobile" onfocus="blur();" />
Related
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');
});
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.
I am using Label and image divs with radio inputs. Everything is working good except when I run that on Iphone radios and checkboxes work on double click only.
Test on :
https://vpcl.outgrow.co/phone
I'm not exactly sure what is causing it, but it may help you to use Modernizr. It allows you to detect whether a user is using a device that uses touch events or click events, and which can help with interactive responses on different devices.
I have have also found that sometimes If I have a hover I will have to double click because mobile doesn't use hover, Modernizr helps in cases like that as well.
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.
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