Javascript 当搜索字段为空时，如何防止提交搜索表单？

当搜索框为空时，下面的代码将禁用搜索按钮。当搜索按钮的输入类型设置为

submit

时，键盘上的submit和enter键都不会提交空表单，但当我将输入类型更改为

按钮

时，将光标放在输入字段内并按enter键，即使发布空表单也会导致重新加载页面。当搜索字段为空时，如何防止按enter键提交搜索表单

<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form> 

<script>
$(document).ready(function(){
$('.Button').attr('disabled',true);
$('.search').keyup(function(){
if($(this).val().length !=0)
    $('.Button').attr('disabled', false);            
else
    $('.Button').attr('disabled',true);
 })
});
</script>

$（文档）.ready（函数（）{
$（'.Button'）.attr（'disabled'，true）；
$（'.search'）.keyup（函数（）{
if（$（this）.val（）.length！=0）
$（'.Button'）.attr（'disabled'，false）；
其他的
$（'.Button'）.attr（'disabled'，true）；
})
});

为表单提交添加事件侦听器

$('form').submit(function(e){
    // check logic here
    if ($('.search').val().length < 1)
       e.preventDefault()
});

$（'form'）。提交（函数（e）{
//在这里检查逻辑
if（$（'.search'）.val（）.length<1）
e、 预防默认值（）
});

其中

e.preventDefault

将避免在没有值的情况下提交表单

否则表单将正常提交

如果要更改

禁用

$(function() {
  $('.Button').prop('disabled', true);
  $('.search').keyup(function() {
    $('.Button').prop('disabled', !$(this).val());
  });
});

你可以这样试试

$('form').submit(function(e){
    if ($('.search').val().length<=0)
        return false;
});

$（'form'）。提交（函数（e）{
如果（$（'.search'）.val（）.length这是经过一些修改的代码：



$（文档）.ready（函数（）{
//默认情况下，“提交”处于禁用状态
$（'.Button'）.prop（'disabled'，true）；
$（'.search'）.keyup（函数（）{
如果（$（this.val（）.length！=0）{
$（'.Button'）.prop（'disabled'，false）；
}否则{
$（“.search”）.focus（）；
$（'.Button'）.prop（'disabled'，true）；
e、 预防默认值（）；
}
});
})；