I need to disable the native keyboard on ios devices when clicking on an input field, I tried to use the "read-only" attribute, however it disables the caret as well and the cursor is not visible anymore. is there any way to fix this issue with javascript?
I also tried using this.blur() to stop loading the keyboard. but it shows the keyboard for a moment and then disappears.
Related
When I use VoiceOver of Mac to navigate the website using the keyboard command (cmd+shift+left/right arrows), the focus remains on a button. It is there until another button is encountered. The issue is only in Chrome and Microsoft Edge browsers. The above-mentioned scenario is working well for Safari and Firefox browsers. When a button gets the focus and VoiceOver moves to other text elements, due to the focus of the button, the voiceover is again navigating back to the focused button and iterating through the elements that are already read.
I tried "focusin","focusout" event listeners to set aria-hidden / tabIndex values accordingly. I also tried setting the focus of elements using CSS, making box-shadow:none, outline:none, but that just makes the focus not visible.
I'm making a chat service, and I want to support mobile devices well.
On a screenshot below, there is an input field. It allows typing text, and to avoid issues like "if the text field is unfocused typing does nothing" it automatically gets focused when clicking outside of it - this does improve the experience on desktop computers. However, on devices with software keyboard, this causes on-screen keyboard to appear on mobile devices which is distracting.
Considering clicking anywhere focuses the text input, is it somehow possible to make on-screen keyboard only appear when the text field is pressed? Or alternatively, somehow detect devices with software keyboard enabled and disable this feature for them. Preferably without explicitly trying to detect mobile devices, touch screen or whatever as there exist touch screen devices with hardware keyboards.
This issue I was able to reproduce in Google Chrome and Opera Mobile on Android, and apparently it happens on iPhones, although I have no device to test it on.
Here is a rather simple example of an issue. If you touch the pink rectangle, it will cause touch keyboard to appear, which I don't want.
<input type=text id=f>
<div style="background: pink; height: 200px; width: 200px" onclick="f.focus()">
The short answer is that this is a built in function and you can't stop it, but there are a couple of options to consider.
1) use the onFocus event to immediately trigger the blur event to hide the keyboard again.
2) set readonly="true" on the element, later remove it and trigger the focus event.
3) create a fake input element with div's and css, when you want to trigger the keyboard focus on a hidden input field and copy out the value of the input on the keyup event as the user types.
Hope these suggestions were helpful to you.
If I got this right, you may also consider to change the logic of focusing the textfield when there is a click "anywhere". On touch-devices the touch events get dispatched first and you can cancel the click-handling (look for preventDefault(), return false; or stopPropagation() which should be called in you touch event handler).
You will need another event listener which handles the touch events outside the textfield, e.g. "touchstart".
If you want to keep the ui effect of a focused textfield, just add a css class "focused" to the textfield by script instead of using textfield:focused{} for your styles.
Any input that I tap inside of my Swiper-Slide on the page lose focus when they keyboard opens (in Chrome and Safari). Once the keyboard is open, I can click the input and then start typing. I'm not exactly sure what's causing the problem because inputs outside of the slider work like normal.
I have an onFocus function being called by the input that doesn't fire the first time it's clicked even though the keyboard pops up. Is there some Javascript or Jquery way to force the browser to focus an input that works in iOS browsers?
I'm trying to use an input text box as a URL sharing widget. Fairly standard: when you click on the textbox, all of the text inside is automatically highlighted to make it easy to copy and paste. It's set as read-only='read-only' to prevent the user from changing the URL accidentally, and the click event is set to this.focus();this.select();. This works on the desktop.
The problem arises with Safari Mobile (I'm using iOS 7.0.6). From what I can tell, the read-only prevents using the standard setSelectionRange(0,9999);. But if I turn off read-only and just use javascript to prevent editing, the iOS keyboard shows once the text input has focus.
tl;dr On Safari Mobile I'd like to have the uneditable textbox be entirely selected on focus but without showing the keyboard (ideally it would show the copy/paste menu too, but I think that's a stretch). Is this possible?
JSFiddle shamelessly forked from this answer:
JSFiddle showing input with read-only set (Doesn't work on Safari Mobile iOS 7.0.6)
I'm trying to build an application where if the user activates a page, a focus event will occur and focus into a text field. I was half-heartedly expecting that when I called .focus() on in the input box, Windows 8 would pop-up the on-screen keyboard. This in not the case.
Does anyone know of a way to get the Windows 8 on-screen keyboard to come up when the text field is focused via javascript.
If the user "taps" into the textfield, the focus event does fire and the keyboard comes up.
I've tried binding to touchstart, 'touchend, click and focus, but all of these do not seem to activate the on-screen keyboard.
This application will run strictly on Windows 8, so there is no need to make it so that other platforms that do not have built-in on-screen keyboards work properly.
You can't. Only user actions can open the on-screen keyboard. This is by design. See here.