Javascript 输入keyup时-在表单内执行函数，不提交表单

我有一个使用jQuery DataTables库的可过滤数据表。 此表位于一个窗体内，当选中行时（在一列中有一个复选框），SUBMIT按钮将它们添加到集合中

附加到表的是一个自定义搜索筛选器，其功能类似于DataTables附带的内置搜索筛选器，但我没有“键入时筛选”功能，而是附加了一个submit按钮，以便在单击该按钮之前不会筛选表结果。在搜索过滤器中添加了一些功能，可以实际运行对数据库的ajax调用，为了减少对数据库的调用量，我在搜索过滤器上按下了按钮，并禁用了“键入时过滤”功能

当我在搜索过滤器中完成输入后，我仍然希望能够单击键盘上的ENTER键来执行此自定义搜索，但我无法阻止表单提交。我在一个名为

“tableFilter（）”

的函数中有一个自定义搜索筛选器。表单的ID是

“#addtitle”

我认为，如果搜索的输入字段仍然处于焦点位置，那么代码就会知道，当我单击ENTER时，它将执行搜索过滤器而不提交表单，但表单仍然提交

---

我的东西有问题吗？我调用的函数不对吗？

我们必须先了解机械原理

let cancelEvent = function (e) {
  e.preventDefault();
  return false;
};

let filter = document.getElementById('dataTables_filter_input');
let addTitle = document.getElementById('addTitle');
let form = document.querySelector('form');

form.addEventListener('submit', cancelEvent);

addTitle.addEventListener('keyup', function(e) {
  let keyCode = e.keyCode || e.which;

  console.log('KEYUP');

  if (keyCode !== 13 || !filter.is(':focus')) {
    console.log('NOT ENTER PRESSED OR FILTER NOT FOCUS');
    return true;
  }

  tableFilter();
  e.preventDefault();
  return false;
});

<form>
<input type="text">
<input type="submit">
</form>

但您永远不能使用提交按钮触发表单输入。要进行表单提交，必须使用type=“button”触发表单提交

演示：

===============

这就是我所认为的武力解决了这个问题

演示：

另一个文本输入

添加标题

另一个文本输入





$（函数（）{
$（“#addTitle”）。关于（'keyup'，函数（e）{
var keyCode=e.keyCode | | e.which；
如果（键代码==13）{
log（“输入文本时按ENTER键”）；
}
});
$（'form'）。提交（函数（e）{
e、 预防默认值（）；
if（$（this）.find（'#addTitle'）.is（':focus'）==false）{
doAjaxForm（）；
}
});
函数doAjaxForm（）{
log（'do ajax form'）；
}  
})

• 如果表单已提交，但#addTitle has focused=什么也不做，则addTtitle keyup将完成您的工作

• 如果表单已提交但#addTitle未聚焦=执行ajax表单

• 如果在另一个文本输入上按enter键（除了#addTitle），这将触发form submit=do ajax form

• 如果单击提交按钮=执行ajax表单

---

我希望这对你有用，因为你没有给我们你的datatables脚本。

让按钮a

type=“button”

不让它提交formChange type=“submit”或

$（“#addTitle”）。on（'keyup'，function（e）{

to

$（“#formID”）。on（'submit'，function（e）{e.preventDefault（）

你也可以给你的datatables脚本吗？在字段处于焦点的情况下单击ENTER确实会返回筛选结果，但在结果显示后仍然几乎立即提交表单。问题根本不在于datatables。事实上，如果表单中有标准HTML表，同样的情况也会发生。所以我想知道为什么你会这样做编辑了dataTables脚本？我不能用英语很好地解释这个。但是试着看看这个

<form>
<input type="text">
<input type="submit">
</form>

$('form').submit(function(e){
e.preventDefault();
})

$('input[type="text"]').keyup(function(e){
var keyCode = e.keyCode || e.which;
        if (keyCode == 13){
            //do something
        }
})

<form>
    another text input<input type="text"><br>
    add title<input type="text" id="addTitle"><br>
    another text input<input type="text"><br>
    <input type="button" value="button"><br>
    <input type="submit" value="submit"><br>
  </form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<Script>
  $(function(){
  $("#addTitle").on('keyup', function(e){
        var keyCode = e.keyCode || e.which;
        if (keyCode == 13){
            console.log("ENTER PRESSED on input text");
        }
    });

  $('form').submit(function(e){
    e.preventDefault();
    if($(this).find('#addTitle').is(':focus') === false){
      doAjaxForm();
    }
  });

  function doAjaxForm(){
    console.log('do ajax form');
  }  

})
  </script>