running textbox.blur after clicking enter using angularjs

Question

I have an small angularjs app which i have developed for just iPads (safari browser). There is a textbox at the top which is used as a filter on an ng-repeat. What i'm trying to achieve is to close the keyboard on the ipad once someone clicks the 'GO' button. I saw the way to close the keyboard is to blur the input element Hide The iPad Keyboard By Hitting the Return Key

I am using the AngularUI library so I am firing the onKeyUp event and am detecting the enter key.

This is the html for the textbox. i'm using the ui-keypress event to call keypressCallback

<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 cutdown version of the javascript which contains just the keypressCallback function

var GunnersenApp = angular.module( "GunnersenApp", ['ui'] );

GunnersenApp.controller(
'SwatchListCtrl',
function ($scope, $http) {      

    $scope.keypressCallback = function($event) {
        alert('enter');
        $event.preventDefault();
    };      

}
);

I have tried to set the focus to document and body which would blur the textbox but i've had no success.

The development version of what i'm working on is at the following url: http://thejonesmobile.com/gunnersen/

Thanks in advance Gav

Answer 1

Why don't you use input.blur()? I've changed your code to:

$scope.keypressCallback = function($event) {
    $event.target.blur();
};

And it worked.