title: running textbox.blur after clicking enter using angularjs
body: <p>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 <a href="https://stackoverflow.com/questions/4810984/hide-the-ipad-keyboard-by-hitting-the-return-key">Hide The iPad Keyboard By Hitting the Return Key</a></p>
  
  <p>I am using the AngularUI library so I am firing the onKeyUp event and am detecting the enter key. </p>
  
  <p>This is the html for the textbox. i'm using the ui-keypress event to call keypressCallback</p>
  
  <pre><code>&lt;input ng-model="query" type="text" id="query" placeholder="product name or number" class="big radius" autocomplete="off" ui-keypress="{13:'keypressCallback($event)'}"&gt;
  </code></pre>
  
  <p>Below is a cutdown version of the javascript which contains just the keypressCallback function</p>
  
  <pre><code>var GunnersenApp = angular.module( "GunnersenApp", ['ui'] );
  
  GunnersenApp.controller(
  'SwatchListCtrl',
  function ($scope, $http) {      
  
      $scope.keypressCallback = function($event) {
          alert('enter');
          $event.preventDefault();
      };      
  
  }
  );
  </code></pre>
  
  <p>I have tried to set the focus to document and body which would blur the textbox but i've had no success. </p>
  
  <p>The development version of what i'm working on is at the following url: 
  <a href="http://thejonesmobile.com/gunnersen/" rel="nofollow noreferrer">http://thejonesmobile.com/gunnersen/</a></p>
  
  <p>Thanks in advance 
  Gav</p>