Can I manually show/hide device keyboard?
My application is behaving strangely if device keyboard is on display and, say, I hit next button then the CSS of jQuery Mobile is getting distorted. I am not getting any javascript or any other error in the console. Any help is appreciated.
I have used one of the suggestions in the following question (the one with 84 up votes...), and it worked well for me: iPad Safari - Make keyboard disappear
Lets assume you have an <input type="text" id="myInput" />.
So in your change page code you can do the following, which will first dismiss the keyboard and then perform the page navigation:
function changeToPage1() {
$("#myInput").blur();
$(':mobile-pagecontainer').pagecontainer('change','page1.html');
}
Tested in iOS Simulator but should work in Android as well.
Related
I have recently updated device to iOS 10 and facing issues with hiding iOS keypad when i switch from one view to another.It was working well with iOS 9.3.
Programmatically what i have done is, i was intercepting some element and auto focusing one input box when i navigate to second view. And when i move back to first view it was getting hidden but now with 10.0 it doesn't hide it automatically.
Because of privacy concern i am not able to post my code here but this is an angular code where i have written a directive which intercepts clicks on input box in the second view and auto focuses the same which in turn makes keypad popping up.
Now my requirement is to hide this keypad when i move back to first view.
As iOS 10 is very recently released any help or suggestion on this will be greatly appreciated.
N.B: Everything works well with iOS 8 and 9.
Here is what i have tried:
Tried hiding active DOM element.
document.activeElement.blur();
Also tried calling blur using target property of $element by passing that to my link function in the directive.
It looks like this is a bug in safari. I had the same issue today and was able to reproduce it with this fiddle:
https://jsfiddle.net/Lz652478/6/
It looks like if an input is removed from the dom via a touch event, the keyboard will become sticky. I've been able to get around it in my app by manually calling blur at the start of my event handler, before the route changes and the input is removed from the dom.
I am New to Phonegap Development, I am Using jQuery mobile to create my UI. I have two Issues here,
Response of button for touch event is very slow. Why..?
I have Created a form with some elements like 2 Inputs text type, 2 Button one after another.
M problem is when I click on input, the keyboard popup makes the page move up, that's OK but when I press the keyboard resign button, the page stay little up.
Can you please help me out..!
and how to Optimize the responsiveness of JQuery mobile UI. I have completely avoided the images.
First, you can follow this link to remove the delay (300ms) from the click event.
And for the second one, i hope you are facing this issue for android. if so, then you need some changes to be done on the AndroidManifest.xml
Use below android property in application tag,
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan"
Will look something like
<application android:icon="#drawable/icon" android:label="#string/app_name"
android:hardwareAccelerated="false"
android:windowSoftInputMode="adjustPan">
This should resolve your issue.
I tried to use the modal feature of the twitter bootstrap framework with iOS5.
After the user clicks on the close button, the modal disappears correctly, but no other item of the screen seems to be clickable. This behaviour just occurs under iOS5.
It's working correctly with iOS 6 and in any desktop browser.
Here the close button:
<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>
May this occur because of the missing html5/css3 support in iOS5?
mr Liam say true: the modal box will also bring up a background overlay which prevents touches outside the background view.
Yor may catch it in debug and write your own js to close it when button clicked.
Like $('.your_class').hide()
Also take attention that this problem may occurred when you open modal window and leave the page. If you click 'back' on device, you may see same problem
I know this is a very old topic, but I thought I would post the solution anyways as this is still a problem with bootstrap v. 3.2.0. It is only an iOS 5.0.0 to 5.1.1 problem.
The problem is to do with the buggy implementation of -webkit-overflow-scrolling on iOS 5.
I simply added an ios5 class through JavaScript to html (by user agent detection, though not the best approach either). Then you can use the following and it will fix the problem.
.ios5 .modal {
-webkit-overflow-scrolling: auto;
}
I am writing an app for IOS and Android using Flex 4.6. Everything is working fine on Android, but on IOS after the softkeyboard appears and the screen pans, when the keyboard is dismissed the screen never pans back down. The bottom half of the screen stays white and the top half remains shifted out of view. I have been searching online and through my code trying to figure out what could be wrong and I've had no luck. I have been running the program in debug mode, but no AS3 error messages are shown. My trace()s are printed, and the app will continue to work but obviously you are unable to interact with the top half of the app. Everything works fine if I set the softkeyboardBehavior in the XML to none, but then the user can't see where they are typing.
I have only been able to test this on my IPod touch with IOS 5.0.1. When I try to run my project in Flash Builders simulator neither the Android nor the IOS version will get past the splash screen.
Any help would be greatly appreciated
Thank you
I have seen that the softKeyboardDeactivate event from TextInput is not fired, as other actions that the unpan should cause are neither fired.
It seems it's a Flex 4.6 version bug. (http://forums.adobe.com/message/4068144).
I've found a workaround, it's a little tricky but it works.
Put a new TextInput hidden on top of the View, then on focusOut event on the original TextInput, force focus on the hidden TextInput. Softkeyboard event will be activated for that TextInput and the pan will return to the top of the View, then take off the focus from the new TextInput and the softkeyboard will disappear.
The user will not notice about this tricky solution.
<s:TextInput id="ghost" x="-100" y="0" width="0" height="0"/>
<!-- ... -->
<s:TextInput id="original" focusOut="textInputFocusOutHandler(event)"/>
...
public function textInputFocusOutHandler(event:FocusEvent):void
{
this.ghost.setFocus();
callLater(this.setFocus);
}
Try adding the "enter" attribute to your TextInput. It worked for me but now I have the issue where it jumps vs. pan when the soft keyboard deactivates.
It seems that my problem was that I was using the StageText skin for my text boxes, which adobe says in the documentation causes panning and any type of scrolling not to work. Switching to the old TextInput skin seems to fix the problem, but you loose all the native features for the soft keyboard, which pretty much ruins your user experience unfortunatly.
I'm working on an html5 app that will be used on iPads in a kiosk mode. The first thing users must do is sign in, so when the homepage loads, I'd like the onscreen keyboard to popup with the focus in the first field.
I've tried all the variants I can think of, including
html5 <input autofocus> attribute
calling document.getElementById("nameFirst").focus() in window onload
same as the previous, but the onload calls a timer method to invoke the focus call later
Has anyone figured out how to make the keyboard automatically appear?
Mobile Safari doesn't allow keyboard showing up without user touching text input element. I think it's by design.
http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard