I have a textarea element in a form. When I click on a button the form will show up(with dynamic html) and I am able to see the textarea element with all the styles.
But, when I click on the textarea to type, except the cursor every style of that textarea is disappearing. I am not able to inspect this because it is only happening on iOS Safari browser.
Can anyone please let me know how to solve this?
Form show up in modal?
Maybe you have same problem with this case.
iOS 11 Safari bootstrap modal text area outside of cursor
Related
We are having trouble with disqus textarea on chrome on iOs.
The problem is that when typing a comment in the textarea, it works fine. But when clicking on the textarea again to move the cursor, and start typing again nothing occurs in the textarea only the backspace works.
Safari on iOs works fine and so does chrome on android.
For me, the trick is to remove focus from the textarea by tapping on plain text elsewhere in the page, then tapping again in the textarea.
For rich text editing I have a UIWebView where I load a local html content with some contenteditable div.
When user is pressing some keys on keyboard I want to detect content changes within that div, resize it accordingly and scroll properly to position cursor above the keyboard.
I'm able to do this using onkeyup event handler:
<div id="contents" onkeyup="keyup()" onpaste="paste()" contenteditable="true">...</div>
In iOS 8 keyboard now has the Quicktype panel with some suggestion words to quickly paste into editable area. How to detect the action of pasting the suggestion text into div?
Event handler like onkeyup doesn't help as the text is pasted without pressing keyboard buttons, onpaste event is not get called.
I also tried to implement MutationObserver to detect DOM changes when something is pasted - doesn't help too.
I'm struggling trying to find the working solution. Any advice is appreciated. Thanks!
In Mobile Safari the iOS 8 Quicktype words fire two (maybe identical?) input events.
Try this in the developer console:
$('input[type=text]').on("input", console.log.bind(console, "input!"));
In UIWebView I have not tried...
I am currently using input text fields that spawn a chooser (listview with various entries) when they are clicked on. Testing this on the appMobi emulator works flawlessly; however, when testing it on an iPhone, the default keyboard appears when the text fields are touched and then quickly disappears to be replaced by the chooser.
Is there a way I can prevent the default keyboard from showing with JQM?
If they require user input, then you can't prevent the browsers' default implementation (at least in a x-browser friendly way). They is certainly no solution with JQM.
I suggest you style your own text box from a div or similar, using html/css. With js you can then wire up the chooser to this element.
I have a date field on a PHP website and I'm using jQuery Mobile for mobile site.
While browsing the site on a mobile browser, (eg firefox mobile on android), on clicking on the date text input, the calendar dialog comes up, but the soft keyboard also comes up on my android (Soft keypad comes up whenever one focuses on a input field)
Is there a way, I can force hide the soft keyboard ? Is there a generic javascript based trick to force hide the soft keypad (that works on all mobile devices like iphone, android etc ?
I'm using the jQuery Mobile datepicker from here
TIA
A more simple solution is to add readonly="true" to the input boxes that you have the datepicker attached to. Even though you can't manually type in a date, on mobile you won't have to deal with the keyboard popping up and getting in the way
Just found an answer to my question. (Guess I didn't search with the right keywords earlier :-|)
Adding a jQuery blur event on focus solves the issue.
Thanks to this post by Danny C
My workaround (though I am using a different plugin: the datebox from jtsage.com) is currently the following:
set a disabled attribute on the input
bind a click handler to the input or its parent
the click handler triggers .datebox('open') on the selected element
This way there is no focus element so no triggering of Android soft keyboard.
add the readonly attribute to your date box. (or readonly="readonly") input type="text" data-role="date" readonly
For JQM add the folloiwing files jqm.datepicker.css , jqm.datepicker.theme.css , jqueryUI.js , jqm.datepicker.js
In Firefox, after you clicking on other places of the page and scrolling the page, you have to click on the flash text once to enable the text selection. Another similar issue occurs in Safari. But in Safari, the flash text cannot even be selected.
How to prevent these issues?
Make sure there is no wmode specified for the sIFR replacements, that should help.