I'm developing an web application that contains a form with two input elements. One of the user requirements is that after inserting a character into the first input it should automatically trigger the focus of the next element and show the keyboard.
After googling about it seems that isn't possible to programatically trigger the keyboard on iOS through JavaScript. The reason however isn't quite clear to me, some say that is an UX feature but I can't find any official information about it.
So my question is, where can I find some official specs that explain the technical reasons whereby this isn't possible?
Official specs:
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html#//apple_ref/doc/uid/TP40002079-SW1
Unfortunately, the official specs will not answer your question.
Generally, with forms on iOS safari, the keyboard will stay open until the user chooses to close it. When you auto-focus the next form input, does it close the keyboard?
Related
My iOS app uses a WKWebView with contenteditable = true on a specific div. I'd like to have code to make the keyboard show up for the web view, so the user can just start typing. Things I've tried that have had no effect:
Telling the web view to becomeFirstResponder (a long shot, because the web view wouldn't know what div to use).
Injecting JS to tell the div to focus(). (This works in other browsers, but sadly not in WKWebView)
Simulating touch events in JS via TouchEvent and dispatchEvent() in the hope of making it seem that the user had tapped on the div.
In the third case I also used addEventListener() to observe the simulated touches and compare them to real touch events from tapping the screen. It looks like the key difference is that the event's isTrusted value is false for the simulated touches.
I get that it's a potential security issue to let apps simulate touch events, but I didn't have any other ideas. I'm trying to get the keyboard to appear, what the user types is up to them and not something I want to mess with. Basically I want the same thing as calling becomeFirstResponder() on a UITextView.
This is very similar to a WebKit issue 142757 but I haven't figured out how to use the suggested workaround linked from there.
Clarification: I can set up and use an editable web view, but the keyboard doesn't appear until I tap on the web view. I'm trying to make the keyboard appear automatically, without requiring a tap to initiate editing.
I tried this in an iPad playground, and it works without any action on my part. It’s possible there is another view that is capturing touches, or “contenteditable” is misspelled, or something else?
I am using phonegap to develop a web app for Android, and since I will have my own keypad in HTML, I need to disable android's system keyboard, preventing the it from showing up when the user clicks on any text input field. I don't want to use readonly input field or onblur() since I would like to have the cursor in the text filed so user can move the cursor position while they're entering inputs.
So I want to completely disable Android's keyboard on default, I tried adding android:windowSoftInputMode="stateAlwaysHidden" to manifest.xml but this does not work.
I also try use a javascript interface from here, but there was a javascript-java bridge crash issue on Android 2.3.x.(link to issue). So I still don't have a good solution now. Please help.
Thank in advance for any help.
Okay, you've got a few options! You can try to disable the keyboard completely using:
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
If you choose this way, be sure to return the settings to normal if that's not done automatically. I haven't used this before and couldn't tell you how it behaves, but keep that in mind! You don't want a user to reply to a text they receive while using your app only to have their keyboard disabled :)
You could use something similar to the following link. I haven't dug through it very thoroughly (tl;dr) but he creates a custom view that extends from android.inputmethodservice.KeyboardView and uses that instead.
https://stackoverflow.com/a/1947370/1183256
Lastly (I'm not sure how much this would differentiate from the first one) you could create your own IME.
How to develop a soft keyboard for Android?
http://developer.android.com/guide/topics/text/creating-input-method.html
MobileSafari as a rule has incorrect HTML button behavior (incorrect meaning: "not like an iOS native button"). Correct button behavior is as follows:
User touches button: Button highlights
User drags finger out of button: Button dims
User drags finger back into button: Button highlights
User drags finger out of button and releases: Button does not click
MobileSafari buttons highlight when you touch them, stay highlighted no matter where you move, and click no matter where you release them (unless the view scrolls, in which case the touch is always canceled, even if you re-enter the button).
This problem applies to all clickable things such as links (when -webkit-touch-callout is set to none). I have only found one web application so far that has correct button behavior: Facebook. Looking at their code for it, it looks like they've done quite a lot of jumping-through-hoops to make it work correctly (tracking all the mouse events manually and not using buttons at all). The code is dense, uses Javelin, and I'm not yet clear on all the pieces required to make it work.
I know I'm somewhat kidding myself (since if it were easy, everyone would do it), but I'm going to ask anyway. Is there any generally-available piece of code that handles this feature? Is there a simpler solution than reverse engineering Javelin, even if it is only applicable to WebKit? (Javelin isn't very-well suited to my lightweight needs.) My ultimate goal is correct button behavior for a UIWebView embedded in a native app, so hybrid JavaScript/ObjC solutions are acceptable as well (though no hybrid approaches come to mind).
Basically what you'd want to do is build out some sort of hybrid hover functionality for touch devices, which detects when your finger moves in/out of the button in question.
I built a basic JSFiddle which implements some barebones functionality. If you know any javascript, I think you'll get the idea.
Live JSFiddle DEMO
Try it on your iOS device (and maybe your Android device??).
-
brian
The scenario, I have an input text field I'm doing partial auto-complete on (exactly like the Tags input field on Stack Overflow... because that's what is, basically).
As a user is typing, I suggest things they may typing; the user then clicks one the suggestions, it replaces a bit of the fields content, and places the cursor after where the insert occurred.
All this works, but after the insertion the software keyboard isn't shown anymore. You can replicate this on the desktop Stack Overflow site.
The code on SO isn't exactly the same, though the symptom is.
Here's the actual code called after the text is inserted into the text field.
$(field).focus()[0].setSelectionRange(newCaretPos, newCaretPos);
(Yes yes, setSelectionRange is non-standard; but it works on all the mobile devices I care about just this moment, so ignore it for now)
On android, iphone, etc. this works fine (the keyboard "flickers" but I'm willing to live with it.
So, the question basically boils down to: How can I force the onscreen keyboard to appear on Windows Phone 7 (Mango update)?
Sorry, there is no guaranteed way to force the SIP to display in WP7. :(
Normally setting the focus on the textbox would force the keyboard. Have you tried just setting the focus? (i.e. not setting the selection range)
I'm developing a Chrome extension that injects JS code into all opened tabs. The task of this code includes displaying a textbox, implemented as a contentEditable <div> to allow formatting. However, the contentEditable element doesn't play well with some websites, e.g. Twitter.
Try it yourself:
Go to twitter.com
Paste javascript:document.body.setAttribute('contentEditable', true); in the address bar and hit enter.
Click anywhere in the document - you should now be able to edit the text.
Try typing a j or k. You will see: The character does not appear, instead, the selection is moved (a tweet in the list will be highlighted).
I have tried hard to find out how Twitter's keyboard navigation is implemented, but could not find any hints. Can you give me any tips on how to solve this problem (and avoid similar problems on other websites)?
Using an iFrame for the input triggers some other, very weird bugs, so I want to avoid that if it's possible.
Please make sure you don't have installed vim keyboard extension on google chrome.
J and K are then used for navigation shortcuts. (up/down).