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!
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!
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.
Am trying build a App using ionic frame work with angularJS which has lot of forms. when ever i open form page keyboard opens automatically. am using ionic keyboard. I have used
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
but no use.
please help me to stop keyboard opening automatically.
I solved the same issue by adding the below attribute to the button or element that opens the form.
data-tap-disabled="true"
eg:
<div data-tap-disabled="true" ng-click="openForm()"> Click here to open form </div>
More documentation can be found on the below link
Link Here
This happened to me when the click event was handled after the page trasitioned. See the GitHub issue I opened: https://github.com/driftyco/ionic/issues/3649
i wish to use soundcloud in a jquery mobile page. I copy pasted the following:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F63422331&show_artwork=true"></iframe>
from http://soundcloud.com/amar-dj/
It works well in chrome browser but when i upload the jquery page on mobile, the track doesnt play.
Also I wish to customize the soundcloud widget to include the track, play button and the artist and track name that's it. No like or share button! For this i wrote the following:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F63422331&&show_artwork=false&show_comments=false&show_playcount=false&liking=false&sharing=false&buying=false;color=ff7700"></iframe>
All but the like button disappears. How do i hide the like button?
Thanks for spotting this problem, you should now be able to hide purchase link as well by supplying buying=false parameter (the problem is fixed and deployed).
As for the like button, please notice that in your example you have not placed an ampersand (&) between liking=false and color=ff7700. If you add it, you won't see like button.
I've a question.
I wrote a small app in Dreamweaver CS 5.5, to export it using Phonegap's SKD to an iOS app.
But the problem is: How can I prevent the user from moving the screen up and down when he slides with his fingers? I read on the Phonegap wiki that it is possible with DIV tags. But that won't work for me, because I use an index.html who reffers to frames. I don't use the the body. How can I prevent the user from slide the screen up and down?
index.html:
<html>
<frameset cols="625,*" border=0 framespacing=0 frameborder="0">
<frame src="frames/navbar.htm" scrolling=auto name="main">
<frame src="frames/blank.htm" scrolling=auto>
</frameset>
</frameset>
</frameset>
</html>
Have you checked out this helpful web page?
http://wiki.phonegap.com/w/page/16494815/Preventing-Scrolling-on-iPhone-Phonegap-Applications
You may want to check out iScroll http://cubiq.org/iscroll if you want the content under it to be scrollable with momentum.
Also disabling "touchmove" events will prevent any kind of movement from the user.
document.addEventListener('touchmove',function(event){event.preventDefault()});
iOS 5 gave us support for fixed elements and -webkit-overflow-scrolling: touch; but those don't give the best effect and can sometimes not work as expected.