I have built a small tool that pushes text into a <textarea> with button inputs, you can see it here
However, on mobile, when a user interacts with those buttons, the keyboard pops up obscuring half the screen. Is there anyway to stop this?
Try adding a readonly attribute to the textarea.
Related
When clicking on an an input type=text, a keyboard comes up. Unfortunately, that changes the height of the web page, so that all the thinks that were "stickied" to the bottom of the page want to come up above the keyboard.
And, in my case, the element that's anchored to the bottom of the page (e.g. the Apply button below) ends up covering the next input element (e.g. Max textbox), so that when the user presses Next on the virtual keyboard, you can't see it at all because the button is still covering it.
My question is whether there is any way to prevent the keyboard from changing the height of the page?
P.S. On iOS it works like you would expect. Bringing up the keyboard doesn't change the dimensions of the page.
It is default behavior on Android devices. As I know, you can not prevent this.
I am working on a mobile webpage. I have one element, that has a text field, that I call jQuery slideToggle on, so it can be hidden from view when the user wishes to dismiss it.
It works fine on browser, even on simulating a device, and in an actual device. The problem is that when the button to dismiss it is clicked on an iPhone, the keyboard pops up.
I already checked if the is the text field is being focused, but seems not to be the case.
What might be the reason for this behavior?
I have a login page that contains the usual email and password fields, as well as a log in button. For usability, the autofocus HTML5 attribute has been used on the email field.
When loading the page on iOS, you can tell by the green border that the field has the focus, but because of iOS limitations, the focus is not fully applied to the field, as you can see here with the keyboard not being displayed:
The first thing the user does is touches the email field, but as far as iOS is concerned, you're clicking on a different part of the page. The focus is actually given to the password field instead, because the page shifts upwards to make way for the keyboard that did not display previously:
In a similar behaviour, if the user touches on the password after page load, the log in button is clicked instead and validation errors appear.
Is there any way to solve this?
Why not disable the autofocus when you show the page on iOS?
It would be very annoying when user enter a website and the keyboard pops up without any actions on the page.
I even can't think of any website popping up the keyboard on the load.
I have a page that is displayed in an UIWebView on an iPad app. The page has an input field, and when the user taps on it, the virtual keyboard popups up.
Currently, the keyboard has the blue 'Go' button. I would like to change the button text from 'Go' to 'Done' and I want to grey-out/disable the button until the user types in at least 1 char.
Is this possible with Javascript/jQuery mobile? I don't have access to the app.
Thanks.
I don't think this is possible. Bu you can change some functionality of the keyboard in html.
Make the button submit your form
Make another keyboard displayed
More features should not be available without access to the app. Instead of greying out the button, you can validate the form before submitting it with jQuery.
Is there any way to "disable" focus of an element (textarea, input, contentEditable iframe)?
I know the blur function takes away the focus, but the user can just go back and focus it again.
I'm asking this because there will be a point in my site where a sort of a prompt (inside the page) will ask for something. At this moment, I want to block the focus of all textareas and inputs in the page, and allow it again when the user press "Cancel" or "Ok".
Thank you very much!
To prevent the user from focusing an textarea or input element, you can disable it:
$("#yourControlId").prop("disabled", true);
I'm not sure about a contentEditable iFrame