we are developing an application which is both mobile and desktop, when we use .focus() on the mobile version the keyboard is not showing up, we try by triggering a click within the focus function $('#numeroCheque').focus(function(){
$('#numeroCheque').trigger('click');
});
but still no keyboard is shown, does anyone faced this issue before, and what can we do to solve it. Thanks.
As I understand, you can't set the focus to an input element programmatically on mobile. There needs to be some kind of user interaction. If building out a Cordova application, you can disable this using the KeyboardDisplayRequiresUserAction setting in your config file. But that is only if you wish to wrap your application in Cordova.
ref: https://cordova.apache.org/docs/en/2.7.0/guide/project-settings/ios/
The other option is to set the input element attribute autofocus but even this I believe won't work on mobile either.
make sure your keyboard element has native support for keyboard interaction and that the element can receive keyboard focus across different platforms.
also make sure the tabindex attribute of .focus() is correct.
Focusing is not enough, you need a click event to trigger focus, and wait until the page is fully loaded.
$(document).ready(function() {
$('#numeroCheque').click(function(e){
$(this).focus();
});
});
Related
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 a webview into my Android app. My html has a textarea and I want to know when the user hides the keyboard with the android back button.
On Titanium the android:back event doesn't work, it isn't fired when the keyboard is hided.
And the blur() event doesn't work too because when the keyboard is hided the textarea doesn't lose the focus.
Please help. Thank you.
You can use androidback on any Ti.UI.Window or Ti.UI.TabGroup top-level container. It was called android:back until 3.0.0. And for the blur() event, you can use the Ti.UI.Android.hideSoftKeyboard() method.
I wanted to show the mobile keyboard in my responsive site. First at i tried to place a hidden input, with placeholder "tap here", but on this input i have an event, which when fires reloads the dom, and bucause of this a cannot able to show the keyboard.
The question is, there is a way to show the keyboard without an input? I'm using HTML5 doctype, and jQuery 2.
Thanks for the answers!
I'm afraid you can't open the keyboard without using a input.
For more information you can read the following thread:
Show virtual keyboard on mobile phones in javascript
If it is for a game, the best manner is create a propper layout with the buttons you want to use.
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