I am seeing some strange behaviour on a pair of input fields in Webkit 534.30 on Android 4.0.4. On focus in the field, the user is unable to click the page and hide the keyboard i.e. gets 'stuck in the field. It works fine in Chrome and in the stock browser on a Sony Xperia S but not the stock ICS browser on a Galaxy S2.
Is anyone aware of a known issue with input focus/blur in this version of webkit or whether there is a better way to set input field focus than:
The code just uses:
$('#input_id').blur(function ()
{
// update some other parts of DOM
});
and
$('#input_id').focus(function ()
{
$(this).val("");
});
Is there a better way to do this for mobile browsers? This issue seems isolated to this particular build of Android on the S2.
I have tried disabling all Javascript and debugging using Adobe Edge Inspect but this hasn't thrown up anything useful.
This was caused by having non numeric characters in the input fields with their attribute 'type' set to "tel". It seems that particular build of webkit would really rather you didn't do that.
Related
Dynamic focus using JavaScript is not working properly in iPad iOS 13+(Safari). Click events are also not triggering properly. Are there any major changes in executing JavaScript methods like element focus in the latest iOS for iPad. This is just happening in iPad only and not in iPhone.
Scenario: I need to set focus on an input-box when selecting an item from the auto-populated list. Also, I'm checking this with voice-over in on state. So, I want it to read the value inside the input-box. The same feature is working fine in iPad iOS 12, but showing some weird behavior in iOS 13. Could anyone suggest me a workaround.
I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.
Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.
There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
Looks like Windows smartphones can help you, can't find any issue concerning a problem.
I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.
Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?
Bonus2 - autodetect scanner library.
Based on thoses answers you have to try some workarounds
You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up
In your case at the openning of your page ?
At least maybe this JS fiddle can help you or this one
You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard
Happy Coding.
try below code. It might work
// div is some selected element
var f = function(event) {
$timeout(function() { // angular way, setTimeout is OK
input[0].focus();
event.preventDefault();
})
};
var mobile = false;
div.on('click', function(event) {
if(mobile) return;
f(event);
});
div.on('touchstart', function(event) {
mobile = true;
f(event);
});
div.on('touchend', function(event) {
event.preventDefault();
event.stopPropagation();
});
My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
Check and reopen the keyboard
You will need to do something like this-
<input type="text" style="visibility: hidden; position: fixed; left: -200px" >
With jQuery-
$("#theOffViewBox").focus();
This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.
I have an HTML page which has an input field with type="text", autocomplete="off" and autocorrect="off"
Although this turns off the drop down that appears below the input field with previously entered values, I still get these values in the suggestions that appear above my soft keyboard in Samsung Galaxy Tab S tablet. Please see the image below.
Setting autocomplete="off" and autocorrect="off" works fine for Sony Xperia Z tablet. But Samsung Galaxy Tab S is giving issue, which has android 4.4.2 and chrome browser version 38.0.2125.102.
Anyone knows why?
Note: I know i can turn off suggestions from keyboard settings or change the keyboard itself, but i want it to work without the user having to do that. For example sony xperia z tablet have suggestions turned on but it never shows suggestions for input fields that have autocomplete=off, and shows suggestions otherwise.
I could be way off base here, but my thought is that its the keyboard you are running. Samsung's default keyboard on the Tab might have autocomplete/autocorrect by default. There should be another keyboard you can switch to (whether it be android's default or something else). Switching might get you the result you are looking for.
Quote yanchenko from https://stackoverflow.com/a/4488987/2026478
When developing for 2.0+, the supposed way is setting android:inputType="textNoSuggestions" (ref). Unfortunately, suggestions are still shown on HTC Desire 2.2 (and probably other HTC Sense devices as well).
With "android:inputType="textVisiblePassword" the sotware keyboard by HTC won't allow you to switch language.
So I stick to "android:inputType="textFilter" to disable suggestions.
Or programmatically
Quote 1ka from https://stackoverflow.com/a/5039551/2026478
final EditText et = (EditText) findViewById(R.id.SearchText);
et.setInputType(et.getInputType()
| EditorInfo.TYPE_TEXT_FLAG_NO_SUGGESTIONS
| EditorInfo.TYPE_TEXT_VARIATION_FILTER);
Source: How to disable displaying "suggestions" on the Soft Keyboard
Prior to iOS8, using the Javascript .focus() method on an input element would appear to have no effect (the virtual keyboard would not display). After the latest iOS 8 release, running the .focus() method seemed to have no effect on page load but once a user touched anywhere on the screen the virtual keyboard would instantly appear and scroll the page to the element in focus. (This is also an issue when I use the HTML attribute "autofocus")
This change has caused issues with iOS8 users on my site. When a user attempts to click a button on my page the sudden scroll and keyboard appearance causes them to unintentionally click a button that was lower on the screen.
I am assuming this is a bug in iOS8 and was not intentional feature, my question is what is the most efficient solution to fixing this problem?
Do I have to check navigator.userAgent to see if the device is iOS8, every time I use the .focus() method?
It looks like you're definitely hitting an iOS 8 bug. In iOS7, Safari would (apparently) ignore or keep unfocused elements that had focus set prior to page load. This includes both <input autofocus> and input.focus() that occur up to some point, possibly page load (I tested just with an inline script).
In iOS 8, Safari is now apparently remembering that the element was focussed but not actually focussing it until a touch down event. It is then blindly sending a click event to whichever element received the touch up.
Both browsers behave the same for input.focus() occurring after page load. They both zoom to the element and bring up the keyboard.
Tests:
input.focus() before page load: http://fiddle.jshell.net/qo6ctnLz/3/show/
<input autofocus>: http://fiddle.jshell.net/qo6ctnLz/4/show/
input.focus() after page load: http://fiddle.jshell.net/qo6ctnLz/6/show/
The good news is that you only need to be worried about new behavior on elements you want to prefocus. The other good news is that while you will have to use a user-agent workaround, you can use it for all iOS versions since they were already behaving like you weren't autofocusing:
if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
element.focus();
}
This appears to be the approach http://www.google.com uses based on some basic user-agent testing:
Mac Book Pro: autofocus before page load.
iPhone: no autofocus
iPad: no autofocus
Kit Kat (Android): focus after page load, possibly doing extra detection for presence of software keyboard.
If you haven't, you should go ahead and file a radar with Apple at https://bugreport.apple.com.
If you are developing a Cordova project, you can fix it adding this line
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
to your config.xml file. Tested in IOS 8.3 and IOS 8.4
It seems that in iOS 8 there has been an API change on the default handling for the javascript focus() command. If your application is a hybrid app in which you have direct control over Apple's web view facade the below is directly from apples docs.
A Boolean value indicating whether web content can programmatically
display the keyboard.
[myWebView setKeyboardDisplayRequiresUserAction:YES];
When this property is set to YES, the user must explicitly tap the
elements in the web view to display the keyboard (or other relevant
input view) for that element. When set to NO, a focus event on an
element causes the input view to be displayed and associated with that
element automatically.
The default value for this property is YES.
From the last paragraph it seems this method call is not strictly for the keyboard. It indicates that it is for input views across the board i.e. drop down and date picker etc.
It seems though there is a bug as this method call is not currently working for me. The current behavior I am receiving corresponds as if it defaults to NO.
I have a solution:
Disable all inputs
Enable the input you wish to focus
Set the focus to that input
Re-enable all the other inputs
Here's a conditional monkeypatch for jQuery.focus so you don't need to add the userAgent test everywhere.
JavaScript
if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
(function($) {
return $.fn.focus = function() {
return arguments[0];
};
})(jQuery);
}
CoffeeScript
if /iPad|iPhone|iPod/g.test navigator.userAgent
(($) ->
$.fn.focus = ->
arguments[0]
)(jQuery)
Note: I'm returning arguments[0] so we don't break method chaining such as $(el).focus().doSomethingElse()
I've logged a bug about this into the Apple Bug Reporter and they closed it as duplicate, which is a sign they are working on fixing this. Unfortunately they didn't give me some more information about the duplicate item or about the problem itself. I can only see the duplicate item state, which is Open.
For anyone coming to this on 2018, there is a plugin that fix it. Just install this https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix and input.focus() will work automatically without any additional work.
I'm writing an iPhone web app, and I want to automatically focus a text field when the page is loaded, bringing up the keyboard. The usual Javascript:
input.focus();
doesn't seem to be working. Any ideas?
It will only show the keyboard if you fire focus from a click event, so put a button on the page with a onclick that does the focus and it will show the keyboard. Completely useless except for validation (on click of submit validation code focuses on invalid element)
Edit: The following no longer works on iOS - UIWebView did allow autofocus and home screen links used to autofocus but they disabled that many versions ago.
The autofocus (see below) property doesn't work from a url in Mobile Safari but does work if you are:
using a UIWebView
using a home screen link
The fontsize of the input needs to be large enough to avoid the iOS10 zoom on double-tap (now that viewport is always zoomable) and to design the page to be sized so that it fits the screen (otherwise on page loading you get strange timing/race bugs in zoom, or if scrollable the field sometimes doesn't center to the screen properly).
autofocus: The HTML5 spec for doing this is the autofocus property of the input tag. But iOS ignores that, presumably for a cleaner UI that doesn't pop up the touch keyboard when navigating to a page. Here is a page that demonstrates the autofocus property. Before HTML5 you would call element.focus() in the window.onload event. However focus() calls are not supported on iOS except during the handler of an onclick event.
Note: this answer is old and may not be relevant to newer versions out there...
It comes as no help to you but the last poster in this thread wrote that its a bug of the webkit engine.
I can't tell if its a verified bug or not...
Last post from way back machine (as original seems to not work):
I am developing my app in pure XHTML MP / Ecmascript MP / WCSS. So
using native platform browser control api is really not an option for
me. Yes the behaviour u mention is the same as mine. I searched his
topic in the bugzilla at webkit.org and found that this indeed is a
reported bug. focus() to a text box does highlight the element but
does not provide a carat in it for the user to start entering text.
Using a timer as mentioned by "peppe#peppe.net" does not help either.
This behaviour is common across platforms (s60,iphone,android) which
use the webkit engine.
So as of now i dont see a solution to this problem.
Hope this helps
I have a similar issue, only my issue is that the focus will not occur on a 'touchend' event.
http://jsfiddle.net/milosdakic/FNVm5/
The following code will work in Chrome/Safari etc. but will fail on Mobile Safari. The only way to get it to work is to make the event on 'click', but seeing as the code is made for an iOS device, it would benefit for it to work with touch events.
It seems to be a bug with the Webkit engine.
If you are setting focus with from a click event, you need to preventDefault otherwise the click events default action will set focus on the clicked item.
A bit late maybe but for future person maybe. In our webapp running on iOS iPad (6 and more recent), we do it with a set interval:
startFocusOnTextField: function() {
this.intervalIDForTextFieldFocus = window.setInterval(function() {
document.getElementById(page.textInputFieldObj.id).focus();
}, 150);
},
Which is called on page load (jQuery mobile environment)
This is a workround:
setTimeout(function(){
input.focus();
},500);//milliseconds