Question

我有一个非常简单的形式。当用户键入输入字段时，我想更新他们在页面上其他位置键入的内容。一切正常。我已将更新绑定到keyup，change和click事件。

唯一的问题是如果您从浏览器的自动填充框中选择一个输入，它就不会更新。从自动填充中选择时是否会触发任何事件（显然既不是change也不是click）。请注意，如果您从自动填充框中选择并且模糊输入字段，则会触发更新。我希望它能在自动完成后立即触发。

请参阅：http://jsfiddle.net/pYKKp/（希望您过去使用名为“email”的输入填写了很多表单。）

HTML：

<input name="email" /> 
<div id="whatever">&lt;whatever></div>

CSS：

div { 
    float: right; 
}

脚本：

$("input").on('keyup change click', function () { 
   var v = $(this).val(); 
    if (v) { 
     $("#whatever").text(v);   
    }  
    else { 
        $("#whatever").text('<whatever>'); 
    } 
});

Answer 1

我建议使用monitorEvents。它是由web inspector和firebug中的javascript控制台提供的函数，它打印出元素生成的所有事件。以下是您如何使用它的示例：

monitorEvents($("input")[0]);

在您的情况下，当用户从自动完成下拉列表中选择一个项目时，Firefox和Opera都会生成input事件。在IE7-8中，在用户更改焦点后会生成change事件。最新的Chrome确实会产生类似的事件。

详细的浏览器兼容性图表可在此处找到：
https://developer.mozilla.org/en-US/docs/Web/Events/input

Answer 2

这是一个很棒的解决方案。

$('html').bind('input', function() {
    alert('test');
});

我使用Chrome和Firefox进行了测试，它也适用于其他浏览器。

我尝试了很多具有多个元素的事件，但只有当您从自动完成中选择时才触发此事件。

希望它可以节省一些时间。

Answer 3

添加“模糊”。适用于所有浏览器！

$("input").on('blur keyup change click', function () {

Answer 4

正如Xavi所解释的那样，没有100％跨浏览器的解决方案，所以我自己创建了一个技巧（继续5个步骤）：
1。我需要一些新阵列：

window.timeouts     = new Array();
window.memo_values  = new Array();

2。关注我要触发的输入文本（在您的情况下是“email”，在我的示例中为“name”）我设置了一个Interval，例如使用jQuery（不需要考虑）：< / p>

jQuery('#name').focus(function ()
{
    var id = jQuery(this).attr('id');
    window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});

关于模糊的 3。我删除了间隔:(总是不需要考虑使用jQuery），并验证值是否已更改

jQuery('#name').blur(function ()
{
    var id = jQuery(this).attr('id');
    onChangeValue.call(document.getElementById(id), doSomething);
    clearInterval(window.timeouts[id]);
    delete window.timeouts[id];
});

4. 现在，检查更改的主要功能如下

function onChangeValue(callback)
{
    if (window.memo_values[this.id] != this.value)
    {
        window.memo_values[this.id] = this.value;

        if (callback instanceof Function)
        {
            callback.call(this);
        }
        else
        {
            eval( callback );
        }
    }
}

重要说明：您可以在上面的函数中使用“this”，指的是您触发的输入HTML元素。必须指定一个id才能使该函数起作用，并且可以将函数或函数名或一串命令作为回调传递。

5. 最后，即使从自动填充下拉列表中选择了值，您也可以在更改输入值时执行某些操作

function doSomething()
{
    alert('got you! '+this.value);
}

重要说明：再次在上面的函数中使用“this”引用您的触发输入HTML元素。

工作时间!!!
我知道这听起来很复杂，但事实并非如此我为您准备了working fiddle，要更改的输入名为“name”，因此如果您在在线表单中输入了自己的名字，则可能会有一个自动填充下拉列表供您测试。

Answer 5

使用jQuery或JAVASCRIPT检测表单输入上的自动完成

使用：事件输入。选择（输入或文本区域）值建议

作为观察示例：

$(input).on('input', function() { 
alert("Number selected ");

}）;

以JAVASCRIPT为例：

<input type="text"  onInput="affiche(document.getElementById('something').text)" name="Somthing" />

这启动ajax查询......

Answer 6

唯一可靠的方法是使用间隔。

Luca的回答对我来说太复杂了，所以我创建了自己的短版本，希望能帮助某人（甚至可能来自未来）：

fatal error C1001: An internal error has occurred in the compiler.
(compiler file 'f:\dd\vctools\compiler\cxxfe\sl\p1\c\symbols.c', line 5786)
 To work around this problem, try simplifying or changing the program near the locations listed above.
Please choose the Technical Support command on the Visual C++
 Help menu, or open the Technical Support help file for more information

在Chrome，Mozilla甚至IE上测试过。

Answer 7

我已经通过monitorEvents认识到，至少在Chrome中，keyup事件会在自动完成input事件之前被解雇。在普通键盘输入上，序列为keydown input keyup，因此在输入后。

我做的是：

let myFun = ()=>{ ..do Something }; input.addEventListener('change', myFun ); //fallback in case change is not fired on autocomplete let _k = null; input.addEventListener( 'keydown', (e)=>_k=e.type ); input.addEventListener( 'keyup', (e)=>_k=e.type ); input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();})

需要与其他浏览器一起检查，但这可能是一种没有间隔的方式。

Answer 8

我认为你不需要这样的事件：这只发生一次，并且没有良好的浏览器范围支持，如@xavi的答案所示。

只需在加载一次检查字段的主体后添加一个函数，以便对默认值进行任何更改，或者只是将某个值复制到另一个地方，只需复制它以确保它已正确初始化。

自动完成时触发的任何事件？

HTML：

CSS：

脚本：

8 个答案:

使用jQuery或JAVASCRIPT检测表单输入上的自动完成