专注于输入类型文本/按键搜索

Question

I've written a simple input of type text, but when I press enter while my cursor is inside the textbox, it looses the focus. How can I ignore enter key to stop losing focus from the text box? I tried doing something like this:

<input type="text" (keyup)="keepFocus($event)" />

and keepFocus() is a method:

keepFocus(e) {
 e.target.select();
}

But this method is called everytime I press a key, which is not very efficient. Is there a better solution to handle this behavior?

Answer 1

You capture just the enter key, and prevent default when it's pressed

 document.getElementById('myInput').addEventListener('keypress', function(event) { if (event.which === 13) event.preventDefault(); }); 

 <input type="text" id="myInput" /> 

Answer 2

Another way to do this is by getting the keyCode (that e parameter use).

I mean, use this:

http://www.javascripter.net/faq/keycodes.htm

And this:

https://www.w3schools.com/jsreF/event_preventdefault.asp

Something like this would be fine:

  function keepFocus(e) { if(e.keyCode == 13) e.preventDefault(); } 

  <input type="text" keyup="keepFocus" /> 

This will prevent that you lost the focus when enter key is pressed!

Answer 3

There are two ways to do the job.

First, reput the focus to the input when the user click "Enter":

<input type="text" onkeyup="keepFocus(event);" id="teste" />
function keepFocus(e) {
    if (e.key=="Enter") {
      var teste = document.getElementById ("teste");
      teste.focus ();
  }
}

Second, prevent the default behavior of the text field:

function keepFocus(e) {
   if (e.key=="Enter") {
     e.preventDefault ();
  }
}

I think the second way is better because you do not have to add an id to your input.