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
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!
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.
I am working on the phonegap project.
I uses
codova version 3.5.0
jquery mobile version 1.2.1
I have made dialog box with back and ok button using data-role = dialog. It is working fine when content is small. But the dialog box is not scrolling when the content is long.
I have attached images of my problem.
I have set "DisallowOverscroll" to "true" in my config.xml file.
<preference name="DisallowOverscroll" value="true" />
I am not sure this problem is cordova related, your css should handle overflows. That popup is inside a webkit browser in principle right? Your index.html (or whatever main html is) may fit inside the screen but that web page or any popup inside it can have scrolling. In short, you can check for overflow-y and scrolling with css in general.
I have a data entry form in a HTML5 application that users will be filling in on an iPad 2.
Is there any way to make the iPad keyboard default to the "Symbols" view (i.e. the keyboard with the numbers 1,2,3,4,5,6,7,8,9,0)?
They will only be entering numbers in these fields, and it's quite frustrating every time you hit "next" it reverts back to the QWERTY view.
You could do this on the iPhone by using some -wap CSS, but it doesn't work on the iPads unfortunately.
Wossname's solution above works well, but if you are also using this method to hide the spin buttons that Webkit add to <input type="number" /> in desktop Safari, it will also disable the placeholder attribute in desktop Safari.
Using type="text" pattern="[0-9]*" instead of type="number" seems to fix both of these issues.
I haven't tested this myself, but according to Apple's docs this should work:
<input type="number">