2017-03-09 7 views
2

私は不満足な問題に遭遇しました。 inputchangeイベントは異なる用途があります:Javascript oninput:ぼかし(携帯)での発砲を防ぐ方法は?

  • input値は動作です

を変更した場合の要素は、フォーカスを失ったときに要素の値が

  • changeを変更するたびに発射する必要があります火なければなりません私が見ているのはを除いてモバイル(Android Chrome)でテストします。モバイルでは、両方のシナリオでinputイベントが発生しています。変更が発生するたびに、フォーカスが失われると、が発生します。

    Here's a JSFiddle to test、および例:

    <input id="input" type="text" /> 
    <script> 
        // On mobile, this will fire an extra time when the input loses focus! 
        document.getElementById('input').addEventListener('input', console.log); 
    </script> 
    

    これは、コンポーネントのための私の希望の動作と競合している、と私はそれを退治する多くの幸運を持っていませんよ。それは、の前にblurchangeのイベントが発生しているので、それを防ぐことができず、通常のinputイベントと区別するイベント自体に何も見つかりませんでした。誰でもアイデアはありますか?

    私はAndroid Chrome 56.0.2924.87でテストしていますが、他のモバイルブラウザでも同様の動作が確認されていれば、感謝しています。

  • 答えて

    1

    lastValueを配列に格納してから、現在の値をlastValueにチェックし、違いがある場合にのみ実行します。

    let lastValue = null; 
    document.getElementById('input').addEventListener('input',() => { 
        if (this.value === lastValue) { 
         return; // do nothing 
        } 
    
        lastValue = this.value; 
        // do something 
    }); 
    
    関連する問題