CODEWITHSUNDEEP
angularjshtmltwitter-bootstrap
vict
vict

Reputation: 212

How can i change the behavior of the enter key with angularjs

NOT DUPLICATED

I have a search with an input, a button and another button to toggle the advanced search:

<form role="form">
  <div class="form-group ">
  <input type="text" id="search-input" ng-model="searchTerm" autocomplete="off" autofocus ng-keydown="onKeyDownEnter($event)" />
    <div class="btn-group " >
      <button type="button" ng-click="search()" class="btn btn-default">Submit</button> 
      <button class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Desplegar menú</span>
      </button>
        <div id="subMenu" class="dropdown-menu advanced-search"> 
          <div class="form-group">
            <label for="usr">Find documents with...</label>
            <input type="text" class="form-control" ng-model="adSearch.q1">
          </div>
          <div class="form-group">
            <label for="usr">And</label>
            <input type="text" class="form-control" ng-model="adSearch.q2">
          </div>
          <div class="form-group">
            <label for="usr">Or</label>
            <input type="text" class="form-control" ng-model="adSearch.q3">
          </div>
          <div class="form-group">
            <label for="usr">Not</label>
            <input type="text" class="form-control" ng-model="adSearch.q4">
          </div> 
      </div>  
    </div>
  </div>
</form>

When i press the enter key, the button of the advanced search is which takes the action. I would like to know what can i do to the normal search (the fisrt button) takes the action when i press the enter key.

I do not want use jquery or javascript i need to do it with angularjs, i thought i could do it with just css but seems like i can not.

I can use this:

 $scope.onKeyDownEnter = function($event){
  if ($event.keyCode === 13) {
    console.log("yeeeee");
  }
};

But this also toggle the "subMenu", I do not know how to disable the behavior of that "subMenu" when i press the enter key.

Extra information:

Here i have the subMenu before press enter key

Here i have the subMenu after press enter key

Upvotes: 0

Views: 1175

Answers (3)

vict
vict

Reputation: 212

I do not know why this code was the cause of this problem:

<button class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Desplegar menú</span>
  </button>

If you have this problem, just add type="button" like this:

<button type="button" class="btn dropdown-toggle  downArrow" data-toggle="dropdown">
          <span class="caret"></span>
          <span class="sr-only">Desplegar menú</span>
        </button>

And all will work fine

Upvotes: 1

Alteyss
Alteyss

Reputation: 513

Did you try to apply focus ? Like this :

$('#myButton').focus();

Upvotes: 0

jimish
jimish

Reputation: 684

As you have used autofocus in your search input box you can use jquery to get focus on your normal search button:

$(document).ready(function(){
   $('#search-button').blur(function(){ $('#save-btn').focus(); });
});

Ps: please give ID to your button save-btn to get this working.

Upvotes: 0

Related Questions