So I'm trying to auto select all the text within a textarea on click. Here's my code:
<textarea class="donger" onclick="this.setSelectionRange(0, 9999);" readonly="readonly">Testing</textarea>
http://jsfiddle.net/fvy37tyc/
This works fine in iOS Safari, however it doesn't work in iOS Chrome. If I remove the readonly it works in both browsers but unfortunately then it brings up the keyboard which covers half the screen.
I tried this to remove the keyboard, but unfortunately it disables the auto select:
$('.donger').blur();
Question
So does anybody have any ideas that I could select the text on click on mobile without having the keyboard come up?
Related
When typing into a text box with the on-screen keyboard and then tapping on a clickable element while the keyboard is still open
the on-screen keyboard disappears as expected
the tap is ignored, I see in the debugger that the click event handler isn't even reached
tapping on the clickable element again, it now works as designed.
Tapping on other elements on the page with a click event handler while the keyboard is open works fine. One difference is that the unclickable button comes up only while typing, as it is in an autocomplete dropdown, a <ul> element switched visible by removing display: none after the third character is typed.
This happens on Firefox for Android, recent versions. It works in Chrome. Safari on iPad works, but only since the recent 16.x upgrade.
This looks like a weird browser vs platform quirk. Does anyone happen to know a workaround or can even explain some background
EDIT after further experimentation I have a fairly minimal jsfiddle to demonstrate the problem. It seems that Firefox on Android ignores click handlers which are attached to HTML elements created while the on-screen keyboard is open. Wouldn't mind if someone could confirm in a comment that I am not alone with my FF while waiting on an answer from someone in the know.
Suppose I have a high textarea, like this:
<textarea cols="40" rows="200"></textarea>
such as the one in https://jsbin.com/jevipuz.
When I open this site in mobile Safari or Chrome on iOS and I start typing in the textarea, the text disappears behind the soft keyboard after a while, because the body doesn't scroll to keep the cursor in view. It works correctly on Android mobile browsers (and desktop browsers).
Is there a way to make this work on iOS as well, using HTML, CSS and/or JS?
One my webpage I have a bootstrap model opened which has a form with two text boxes and few buttons. When I touch text box keyboard opens which is what I would expect but when I press done (on top of open keyboard) to close keyboard, safari on iPhone it scrolls all the way to the top of the page. This is causing model to loose focus and scroll events are being sent to underlying main page. So the question is, is there any way to get keyboard close event so that I can override this behaviour or any other way prevent it from happening. It's only happening on iPhone chrome and iPhone safari. It works fine on android chrome.
using dropzone.js
dropzone.on("addedfile", function(file) {
$('input#photo_title').focus();
});
is there some reason that this script does not work in Safari/iphone? It works just fine on my desktop.
Safari is up to date. i want to put the focus on the input with the mobile keyboard displayed and insert cursor displayed, instead the input is highlighted but must be clicked to bring the keyboard up/insert cursor up.
Set textbox focus in mobile safari
it is not possible to use .focus() to bring up the keyboard in IOS. This is the design and from numerous web sources apparently there is nothing you can do about it.
On mobile browsers, Is there a way to prevent the default keyboard (like when using the readonly=true property on the textarea) while keeping the caret or text insertion cursor functioning?
To enable the user to choose a location inside the textarea, while not poping-out the keyboad?
I'm not entirely sure that this would stop the keyboard from appearing, but this would keep the user from typing in the textarea:
<textarea maxlength="0">Put your text here</textarea>
Keep in mind that this isn't supported in Internet Explorer below 9, and it is not supported in Opera. Seeing that you are aiming for mobile devices, this shouldn't really be a problem.