按下输入键时无法阻止输入提交

Question

我从输入中得到了意外的行为。我有以下代码：

<form id="search_form">
    <div id="search_container">
       <input type="text" id="search_text">
    </div>
    <select onchange="search_field_on_change()" name="search_field">
       <option value="login" selected>Usuario</option>
       <option value="su.name">Nombre</option>
       <option value="surnames">Apellidos</option>
       <option value="email">Correo</option>
       <option value="role">Rol</option>
       <option value="access">Acceso</option>
       <option value="center">Centro</option>
    </select>
    <button type="button" onclick="search()">Buscar</button>
    <span id="modify_user_message"></span>
</form>

当我在输入元素上按下回车键时，表单被提交并执行以下请求：

GET home.php?search_field=login

我想避免这种行为。我试过这个：

$('#search_text').keypress(function(e){
    console.log('Hello');
    e.preventDefault();
    if (e.which == 13){
        search();
    }
});

但是我在控制台中没有得到任何东西，所以我认为在捕获事件之前执行了请求。

我能做什么？

谢谢。

Answer 1

尝试将 keypress 事件更改为 keydown，因为 Enter 键的默认行为是在按键按下时捕获的，因此您必须在它开始执行默认操作时阻止它。

这是一个工作示例：

      <!DOCTYPE html>
       <html>
       <script>
       function selecting_key(whatKey){
              if(whatKey.keyCode==13){
         whatKey.preventDefault();
        }
       }
      </script>
     <body>
     <form>
    <input type="text"  onkeydown='selecting_key(event);'>
    </form>
    </body>
    </html>

如果要检查，请尝试将 onkeydown 更改为 onkeyup 以了解哪个事件可以阻止页面提交

按下输入键时无法阻止输入提交

Unable to prevent an input from submitting when press the enter key on it

html

get

submit

enter

preventdefault