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

Question

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

Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — Raviteja, Nov 16 '15 at 09:42
You can not nest forms into each other, that’s invalid HTML. — CBroe, Nov 16 '15 at 09:43
is not a duplicate, i forgot to say i need to do in Angularjs because i thought i just needed css to solve this. — vict, Nov 17 '15 at 09:05
I did not know i can not nest forms, but thanks you for the information that is solved now. — vict, Nov 17 '15 at 09:06
@CBroe In HTML nested forms are invalid but in AngularJS the [ng-form directive](https://docs.angularjs.org/api/ng/directive/ngForm) can be used as a nestable alias for the `
` tag. — georgeawg, Mar 22 '17 at 19:59
@georgeawg: The original code before the edit contained `
` nested into each other. — CBroe, Mar 23 '17 at 11:14

score 1 · Accepted Answer · answered Nov 17 '15 at 11:56

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

score 0 · Answer 2 · answered Nov 16 '15 at 09:44

0

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.

answered Nov 16 '15 at 09:44

jimish

654
1
8
22

Could i do anything similar with Angularjs? – vict Nov 17 '15 at 09:08
@vict: I don't see any recommendable solution. But still if you want to stick with AngularJS, you can use ngFocus and ngBlur in your element. Create a function named focusToSubmit() in your js. and give that function to ng-blur attribute of . in focusToSubmit() function you can call .focus() for normal submit button. – jimish Nov 17 '15 at 09:27
Yes i have already tried that but i do not know how to catch the event keypress any solution @Jimish ? – vict Nov 17 '15 at 09:38
Yes, you can use "onkeypress" attribute in your `` element. do something like: and in that function use event.keyCode == 13 if enter got pressed or not. – jimish Nov 17 '15 at 09:52
But the problem here is that I have dropdown-menu too, so if i do that i will press the button and also toggle the menu. – vict Nov 17 '15 at 10:57
use jQuery if possible. Because with angularJS you ll make your code vulnerable or complex. Because handling all scenarios will cost precious time. – jimish Nov 17 '15 at 11:51
sorry @vict, I couldn't help you. I hope you find your answer soon. – jimish Nov 17 '15 at 12:04
Don't worry @Jimish i did by myself at the end! Mix jQuery with angular are bad practices i think, thanks you anyway for try to help me – vict Nov 17 '15 at 12:33

score 0 · Answer 3 · answered Nov 16 '15 at 09:45

0

Did you try to apply focus ? Like this :

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

answered Nov 16 '15 at 09:45

Alteyss

513
3
17

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

3 Answers3