Question

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

附加到表中的是一个自定义搜索过滤器，其功能类似于DataTables附带的内置搜索过滤器，但在您键入时不会使用＆＃34;过滤器＆＃34;功能，我有一个附加的提交按钮，以便它不会过滤表结果，直到您单击按钮。有一些功能添加到该搜索过滤器实际上对数据库运行ajax调用，并减少对数据库的调用量，我将按钮放在搜索过滤器上并在键入时禁用＆＃34;过滤器＆＃ 34;功能。

当我在搜索过滤器中输入完成以执行此自定义搜索时，我仍然希望能够单击键盘上的ENTER键，但我无法阻止表单提交。我在名为"tableFilter()"的函数中有自定义搜索过滤器。表单的ID为"#addtitle"

$("#addTitle").on('keyup', function(e){
        var keyCode = e.keyCode || e.which;
        console.log('keyup');
        if (keyCode == 13){
            console.log('ENTER PRESSED');
            if ($("#dataTables_filter_input").is(":focus")){
                console.log('FILTER FOCUS');
                tableFilter();
                e.preventDefault();
                return false;
            }
        }
    });

我认为如果搜索的输入字段仍然处于焦点，那么代码就足以知道当我单击ENTER时它会执行搜索过滤器并且不提交表单 - 但是表格仍然提交。

我有什么不合适的事吗？我没有调用正确的功能吗？

Answer 1

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;
});

Answer 2

我们必须首先了解机械。

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

如果您在输入文本中按ENTER键。它会触发：

按钮提交点击
提交表格
输入文字键[ENTER]

如果您想要防止默认行为。您必须在[{1}} [仅]上使用preventDefault（），换句话说，您不需要在$('form').submit或$('input[type="submit"]').click

所以，你的jquery会喜欢这个

$('input[type="text"]').keyup

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

演示：http://jsbin.com/pirepahuhu/edit?html,output

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

这是我认为迫使这个问题解决的问题

演示：http://jsbin.com/hiqatetoti/2/edit?html,output

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

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

如果表单已提交，但#addTitle已关注=什么都不做，则addTtitle keyup将完成您的工作
如果表单已提交，但#addTitle未关注=执行ajax表单
如果您在另一个文本输入上按Enter键（#addTitle除外），这将触发表单submit = do ajax form
如果单击提交按钮=执行ajax表单

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

在ENTER键盘上 - 在表单内执行Function而不提交表单

2 个答案: