in ionic login page , every time when i hide keyboard it will cause a full screen blank (element still there can be click and response) , and after editing input all recover normal. (Only iOS,android is fine,other page's input is fine so it should not be the keyboard plugin's problem)
Maybe this link help you. But it's temporary.
replace <ion-content> with <ion-scroll>
<ion-scroll direction="y" style="right: 0;bottom: 0;left: 0;position: absolute;" class="has-header has-subheader">
keyboard issue
You have to add this two attributes to ion-content padding="true" overflow-scroll="false"
<ion-content padding="true" overflow-scroll="false">
</ion-content>
It worked for me.
Related
I have the following code in my html.
<ion-item (click)="showAddressModal()">
<ion-input [(ngModel)]="address.formattedAddress"
type="text" placeholder="Pick a location for your event">
</ion-input>
</ion-item>
showAddressModal() essentially opens a modal page where the user can search for an address.
Works like charm when I run it on chrome with ionic cordova run browser.
On ioS, however, it takes 2, sometimes 3 clicks to open the modal. First click brings the keyboard up. If I disable the keyboard by using [readonly]="true" on then the keyboard doesn't come up, but I still need 2 clicks. If I disable the entire input using [disabled], it doesn't serve my purpose - cannot click. I have tried moving the (click) from ion-item to ion-input, I have tried removing ion-item altogether, no avail!
Please share your perspective on how I can fix this.
Regards,
J
OK. For now, I've fixed my own problem by removing ion-input altogether and just using ion-text with a (click) listener on it. In lieu of the placeholder, I just show the same placeholder if address.formattedAddress is empty.
Still not sure where the problem is with ion-input and iOS, but will save that problem solving for another day.
For those of you, curious to see the new code, here's what the template code looks like - no change to my component or to the modal itself -
<ion-item (click)="showAddressModal()">
<ion-text inputmode="none">
{{ (address.formattedAddress == "") ? "Pick a location for your event" : address.formattedAddress}}
</ion-text>
</ion-item>
Thanks!
I'm facing a situation when I need to close the keyboard programmatically on iOS. For solving it I'm using this piece of code:
Keyboard.close();
It closes the keyboard but whenever I touch the screen, it reopens. Has someone else faced this situation? Thanks!
I also encounter this problem in ios 11 when using an iframe inside a Modal. If I use this.keyboard.close() to close the keyboard manually, it will reopen in each touch. I finally solve it by
https://forum.ionicframework.com/t/keyboard-reopens-after-close-repeatedly-on-ios/107347/2
In the page that embeds a iframe add the following
embed.ts
declare var cordova;
#ViewChild('ioshack') ioshack;
ionViewWillLeave() {
if(cordova.plugins.Keyboard.isVisible){
this.ioshack.setFocus();
}
}
embed.html
<ion-content>
<iframe [src]="url" width="100%" height="100%" frameborder="0" allowfullscreen>
</iframe>
<ion-input #ioshack type="text" value="" class="ioshack" style="height: 0px;"> </ion-input>
</ion-content>
Apparently Ionic 2 has some bugs when mixing iframes and Ionic 2 pages. In my case I was getting back from an iframe and I need the keyboard to close. The way I managed to solve this issue was by inserting a back button in the iframe, emitting an event from the iframe and attaching a listener to the Ionic 2 app which programmatically pops the last page from the stack. By using this method the keyboard gets automatically closed, you just need to trigger the event in order to go one page back. Hope this answer helps someone that has the same issue!
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.
In iPad Safari browser, when I change focus from a textbox to a dropdown, the keyboard still remains... Is there some way (maybe with Javascript) I can hide the keyboard when user blurs from the textbox?
Indirectly speaking, I am looking for a equivalent of (but in Mobile Safari)
[tempTextField resignFirstResponder];
I found the solution for this at http://uihacker.blogspot.com/2011/10/javascript-hide-ios-soft-keyboard.html. Essentially, just do this (it worked for me):
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
I had iPad with iOS 5.0.1 not hiding the keyboard after successful login on my site. I solved by simply executing the javascript command
document.activeElement.blur();
after successful login and now the keyboard is correctly hidden :-)
I know this is a slightly older question, but I discovered the answer today for this, and the answer is embarrassingly simple... I spent way more time than I would like to admit figuring this out ;)
To prevent showing the keyboard on:
<input type="text" name="someInput" />
for when you want to do something like use a jQuery UI datepicker...
add a readonly attribute like so:
<input type="text" name="someInput" readonly="readonly" />
If you are trying to be mindful of people with JS turned off, you could always leave off the attribute and add it in your code:
$('[name=someInput]').attr('readonly','readonly');
Hope this helps.
Here is a jsFiddle demonstrating the concept: http://jsfiddle.net/3QLBz/5/
$("#txt").on("focus", function(){
$(this).blur();
});
works with jquery UI datepicker on IPad
Natively, iPad, iPhone keyboard should disappear when the input looses focus.
I figured out on mobile/tablet devices that
Safari only handles click event for elements having cursor:pointer
property.
I've finally added cursor:pointer on the body tag for mobile/tablet devices and it works like a charm.
Little sample
body {
#media (max-width: 1024px) { /* IPad breakpoint */
cursor: pointer; /* Fix iPhone/iPad click issue */
}
}
Version without jQuery:
function hideKeyboard () {
document.activeElement.blur();
Array.prototype.forEach.call(document.querySelectorAll('input, textarea'), function(it) {
it.blur();
});
}
I call .focus() on another textfield and the keyboard disappears. I'm using the Sencha touch framework, the textfield im referring to is an Ext.Text object.
I know this is counter-intuitive, but it seems to work for me
Sample.views.MessageBar.getComponent(0).blur();
document.activeElement.blur();
window.focus();
Sample.views.sendMessageBar.getComponent(0).setDisabled(true);
You can use codes above. First and Forth lines are for that textfield. It works on iphone but it doesnt work on Android. I tried Iphone 3gs and samsung galaxy s2.
According to Apple Safari documentation, when you select a dropdown (select list) the iOS dismisses the keyboard and displays native iOS select control. Make sure you use SELECT element for your dropdown list
and also try adding this to your meta tags for the page
<meta name="apple-mobile-web-app-capable" content="yes" />