Question

我的HTML正文如下：

<body>
<form action='http://www.example.com' method='GET'>
    <input type='text' id="text_input"/>
</form>
</body>

在字段中输入几个值并返回到站点后，将从浏览器向用户提供自动完成建议。当您选择一个时，如何让表单自动提交？

在this question中，它们在jQuery中显示类似的内容：

$("#text_input").autocomplete({
    source: ['apple', 'banana'],
    minLength: 2,
    select: function(event, ui) { 
        $("#text_input").val(ui.item.value);
        $("#text_input").closest('form').submit(); }
});

但是，这使用自定义自动完成建议，而不是浏览器保存结果。

Answer 1

浏览器自动完成通常不能使用JS检测到，从脚本的角度来看，只会出现用户输入的一些数据。

我认为最好的办法是重新考虑你对这个问题的处理方法，但是如果你坚决想这样做：

我能想到的最接近的事情就是听取按键和按键的变化，并且在没有按键的情况下发生的变化可以被认为是自动完成。

e.g。

$(document).ready(function(){
  var keyPressed = false;
  $("#test").on("keydown", function(){
    keyPressed = true;
  });
  $("#test").on("change", function(){
    if(!keyPressed){
      alert("Submit");
    }
  });
});

示例：https://jsfiddle.net/o60nf4s6/

问题：

还通过使用右键单击上下文菜单进行粘贴来触发
change事件仅在输入字段失去焦点后触发
输入中的任何按键都会阻止它提交，即使自动完成我们的使用。这仅在从浏览器选项填充整个输入时才有效。

选择浏览器自动完成时提交表单（不是自定义自动完成）

1 个答案: