When I used the Ionic View Android App, I noticed it has a feature I want. After you enter your email/password, when you hit the Keyboard’s GO button, the app acts as if the App Submit button was hit.
How do we setup our apps so that the app Submit thinks it was clicked when the user hits the keyboard GO button?
There are 2 requirements for this to work out of the box:
you need to put the input fields inside a <form ng-submit="submitLogin()">. Notice the ng-submit directive to the
you need to also include a <input> or <button> with type=submit. Be sure NOT to put a style with display:none on this button. If you want to hide it, use something like: <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
Oh great, that works nicely. It makes sense for that to work inside a Form/Submit. Certainly a AngularJS feature more that Ionic. I thought I might have to do something with the submitLogin() function, but no, it just deals with it.
Most useful, I am sure others will find this of value.
I tried your solution but somehow I can’t call the submit function. If I press the button it removes what I have typed into the input field.
<form ng-submit="search(this.searchQuery)">
<ion-header-bar class="bar bar-subheader item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input id="searchKey" type="search" ng-model="searchQuery" ng-change="saveInput(this.searchQuery)" placeholder="Search" autocorrect="off">
<button class="button button-clear" ng-click="clearSearch()">X</button>
</div>
<button class="button button-clear" ng-click="search(this.searchQuery)" type="submit">Search</button>
</ion-header-bar>
</form>
Here is my login.html relevant code:
<form ng-submit="submitLogin()">
<input id="entry1" ng-model="id_entry" type="text" >
<button type="submit" class="button" ng-click="idSubmit()">
Login</button>
</form>
This works for me to make the phone keyboard’s [GO] button activate my “Login” Submit button.
Further, the ng-click=“idSubmit()” code is relevant.
In the Controller for this screen, I have two features:
document.getElementById(“entry1”).focus();
Plain 'ol javascript to set cursor focus on my entry, notice it has BOTH an “id” for Javascript and an “ng-model” for AngularJS use.
To grab the user’s input value, in the controller, code the (ng-click=“idSubmit()”) function we gave our form as:
$scope.idSubmit = function() {
// using the “this” construct to pass in ng-model identified input data.
_id = this.id_entry;
}
Then, have your way with the _id value. Note that the “this” style is the conduit from Form to AngularJS.
I think it’s because you have ng-submit and also ng-click on the ‘Search’ button. So you should remove the ng-click from the button.
Here’s the angular docs about this:
AngularJS – see Submitting a form and preventing the default action
To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives.
Then, there’re a couple of other things:
Don’t use this inside an angular expression. Remember that angular expressions are evaluated in the context of an angular scope.
In your case, I think if you simply remove this, you should be ok.
OK you are awesome. I removed all this. and added an input field as you suggested. As described in the AngularJS docs the form will call the first ng-click function, since this was my clear function it cleard all inputs. So now I added an input before the button with the clear function which calls my search function. Here my new code in case someone else has the same problem. Thanks alot!
<form>
<ion-header-bar class="bar bar-subheader item-input-inset">
<div class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input id="searchKey" type="search" ng-model="searchQuery" ng-change="saveInput(searchQuery)" placeholder="Search" autocorrect="off">
<input type="submit" ng-click="search(searchQuery)" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
<button class="button button-clear" ng-click="clearSearch()">X</button>
</div>
<button class="button button-clear" ng-click="search(searchQuery)" type="submit">Search</button>
</ion-header-bar>
oh, this is a pretty neat hack that works, good thinking!
I don’t know for sure if this works, but try using the native type=reset for the ‘X’ button (also remove the ng-click, since form reset will be native html now), and keep type=submit for the search button. And I believe you won’t need the extra hidden button.
You can also just use ng-keypressed like this:
$scope.keyPressed = function(keyEvent, formModel) {
if (keyEvent.keyCode == 13) {
$scope.formSubmit(formModel);
}
};
yes works! but in my case I need to call that function since there is more logic to be done when cleared. Else this would be a nice and easy solution. thx!
Anyone still having issues with the clear button. I have the keyboard working, however my ‘clear’ button still does not clear. Any feedback will be great.
<form>
<ion-item class="item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input id="searchKey" class="searchInputText" type="search" placeholder="Search" ng-model="searchKey.words" ng-focus="searchFocused = true" ng-blur="searchFocused = false"autocorrect="off" >
<input type="submit" ng-click="search()" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
<span class="button button-icon" ng-click="clear()" ng-show="searchKey.words.length" ><i class="icon ion-ios7-close-empty"></i></span>
</label>
<button class="button button-clear" ng-show="searchFocused" ng-click="cancel()" >CACEL</button>
</ion-item>
The issue was related to having an label element vs a div as stated on the following forum:
Thanks.
mine is not working…
<!-- Posting -->
<form ng-controller='PostsCtrl' name='postForm' ng-submit='addPost()' novalidate>
<input type='text'
ng-model='content'
ng-focus='moveToPostLocation()'
maxlength='20'
class='map-post-box'
id='map-post-input'
placeholder='what will happen today?' required>
<input type="submit" ng-click="addPost()" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
<button ng-disabled='postForm.$invalid'
ng-click='addPost()'
type='submit'
class="map-post-box button button-small button-assertive"
id='map-btn-submit'> {{ timevalue | date:"mm : ss" }} </button>
</form>Now that the go button is working, the keyboard won’t be dismissed after that. Only clicking on the Submit button will dismiss it. Any idea how to solve it? I am testing on Galaxy S5.
Thanks ! this works but only for text fields and search fields… it does not seem to work with Number Fields… it just shows a “next” button which does not do the “submit” function … Anyone else has this problem? can anyone confirm this behaviour?
I experience the same with number fields, other fields (text, email and password) are working fine. Have you found any solution in the meantime?
I’m also having the same issue. The issue only occurs if I hit GO while focused on an input field that is either number or tel. If i’m focused on a text input it works fine.
Hi,
I am having following code
<form ng-submit="getOTP(user)"> <label class="item item-input"> <i class="icon ion-iphone placeholder-icon"></i> <input type="tel" ng-model="user.mobileNo" placeholder="Registered Mobile No."> </label> <input type="submit" value="Get OTP" class="button button-block button-assertive" /> </form>
I need only mobile number to send OTP on that number. If I use input as “text” I can see go button in keyboard but if I use “tel”/“number” it shows next button.
Any solution?
thanks it works
<form name="form2" ng-submit="login()">
<button type="submit" class="botonIngresar">
INGRESAR
</button>
</form>Thank @rcugut, the solution works brilliantly.