自動完成時觸發的任何事件？

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 檢查器和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.專注於我想觸發的輸入文本（在你的例子中是“電子郵件”，在我的例子中是“姓名”）我設置了一個間隔，例如使用jQuery（不需要考慮）：

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 元素。

工作小提琴！！！
我知道這聽起來很復雜，但事實並非如此。
我為您准備了一個工作小提琴，更改的輸入名為“名稱”，因此如果您曾經在在線表單中輸入過您的姓名，您可能會有一個自動完成的瀏覽器下拉列表進行測試。

Answer 5

使用 jQuery 或 JAVASCRIPT 檢測表單輸入的自動完成

使用：事件輸入。 選擇（輸入或文本區域）值建議

以 JQUERY 為例：

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

});

以 JAVASCRIPT 為例：

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

這個開始ajax查詢...

Answer 6

唯一確定的方法是使用間隔。

Luca 的回答對我來說太復雜了，所以我創建了自己的簡短版本，希望能幫助某人（甚至可能是未來的我）：

    $input.on( 'focus', function(){
        var intervalDuration = 1000, // ms
            interval = setInterval( function(){

                // do your tests here
                // ..................

                // when element loses focus, we stop checking:
                if( ! $input.is( ':focus' ) ) clearInterval( interval );  

            }, intervalDuration );
    } );

在 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 的回答所示。

只需在加載主體后添加一個函數，檢查字段一次是否有默認值的任何更改，或者如果只是將某個值復制到另一個地方，只需復制它以確保它正確初始化。