My AngularJS app is designed for iPads using the Safari browser. I have a text box at the top that serves as a filter for an ng-repeat. I want to close the keyboard on the iPad when someone clicks the 'GO' button. I found a solution to hide the keyboard by blurring the input element here
I am utilizing the AngularUI library and triggering the onKeyUp event to detect the enter key.
This is the HTML for the textbox. I'm using the ui-keypress event to call the keypressCallback function:
<input ng-model="query" type="text" id="query" placeholder="product name or number" class="big radius" autocomplete="off" ui-keypress="{13:'keypressCallback($event)'}">
Below is a simplified version of the JavaScript code containing only the keypressCallback function:
var MyApp = angular.module( "MyApp", ['ui'] );
MyApp.controller(
'SwatchListCtrl',
function ($scope, $http) {
$scope.keypressCallback = function($event) {
alert('enter');
$event.preventDefault();
};
}
);
I have attempted to set focus to the document and body to blur the textbox, but it has been unsuccessful.
You can view the development version of my project at the following URL:
Thank you in advance, Gav