web-dev-qa-db-ja.com

オートコンプリートでトリガーされるイベントはありますか？

とてもシンプルなフォームがあります。ユーザーが入力フィールドに入力するときに、ページ上のどこかで入力した内容を更新したいと思います。これはすべて正常に動作します。 keyup、change、およびclickイベントに更新をバインドしました。

唯一の問題は、ブラウザのオートコンプリートボックスから入力を選択しても更新されないことです。オートコンプリートから選択したときにトリガーされるイベントはありますか（明らかにchangeもclickでもありません）。オートコンプリートボックスとblur入力フィールドから選択すると、更新がトリガーされることに注意してください。オートコンプリートの直後にトリガーされるようにしたいと思います。

参照： 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>'); 
    } 
});
javascriptjqueryhtmlautocomplete
64
Explosion Pills

monitorEventsの使用をお勧めします。 web inspector と firebug の両方でjavascriptコンソールによって提供される関数で、要素によって生成されるすべてのイベントを出力します。使用方法の例を次に示します。

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

あなたの場合、FirefoxとOperaは、ユーザーがオートコンプリートドロップダウンからアイテムを選択したときに input イベントを生成します。IE7-8a change ユーザーがフォーカスを変更した後にイベントが生成されます。最新のChromeは同様のイベントを生成します。

詳細なブラウザ互換性チャートはここにあります：
https://developer.mozilla.org/en-US/docs/Web/Events/input

68
Xavi

これが素晴らしいソリューションです。

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

ChromeとFirefoxでテストしましたが、他のブラウザでも動作します。

多くの要素で多くのイベントを試しましたが、オートコンプリートから選択した場合にのみこれがトリガーされます。

時間を節約できることを願っています。

17
Anand Singh

「ぼかし」を追加します。すべてのブラウザで動作します！

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

jQuery OR JAVASCRIPTを使用したフォーム入力でのオートコンプリートの検出

使用：イベント入力。 （入力またはテキストエリア）値の候補を選択するには

JQUERYの例：

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

}）;

JAVASCRIPTの例：

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

これはajaxクエリを開始します...

2
Franklin CI

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

重要な注意：トリガーされた入力HTML要素を参照して、上記の関数内で "this"を使用できます。その関数が機能するためにはidを指定する必要があり、関数、関数名、またはコマンドの文字列をコールバックとして渡すことができます。


5。最後に、オートコンプリートドロップダウンリストから値が選択されている場合でも、入力値が変更されたときに何かを行うことができます

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

重要な注意：再度、トリガーされた入力HTML要素を参照する上記の関数内で「this」を使用します。

WORKING FIDDLE !!!
複雑に聞こえるかもしれませんが、そうではありません。
私は working fiddle を用意しました。変更する入力の名前は "name"なので、オンラインフォームに名前を入力したことがある場合は、ブラウザのオートコンプリートドロップダウンリストがあります。テストする。

2
Luca Borrione

唯一の確実な方法は間隔を使用することです。

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でテスト済み。

1
Sorin C

monitorEventsを介して、少なくともChromeでkeyupイベントが発生することを確認しましたbeforeオートコンプリートinput event。通常のキーボード入力では、シーケンスはkeydowninputkeyupであるため、after入力です。

私がやったことは次のとおりです：

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

他のブラウザで確認する必要がありますが、それは間隔のない方法かもしれません。

1
Björn Grambow

これにはイベントは必要ないと思います。@ xaviの回答が示すように、これは一度だけ発生し、これに対するブラウザ全体の適切なサポートはありません。

本体を読み込んだ後、デフォルト値の変更についてフィールドを1回チェックする関数を追加するか、特定の値を別の場所にコピーするだけの場合は、関数をコピーして適切に初期化されていることを確認します。

0
Nanne