选择浏览器自动完成(而非自定义自动完成)后提交表单



我的HTML正文如下:

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

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

在这个问题中,他们在jQuery中显示了类似的内容:

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

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

使用JS通常无法检测到浏览器的自动完成,从脚本的角度来看,这只是用户输入了一些数据。

我认为最好的办法是重新考虑你解决问题的方法,然而,如果你挑衅地想这样做:

我能想到的最接近你所追求的是倾听按键和变化,而在没有按键的情况下发生的变化可以被视为自动完成。

例如

$(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事件仅在输入字段失去焦点后触发
  • 输入中的任何按键都会阻止它提交,即使使用了自动完成。只有当整个输入都是从浏览器选项中填充的时,这才会起作用

最新更新