入力フィールドに間違ったタイプが入力された場合、Chromeにメッセージを表示します。

Question

Chrome（55.x）では、ユーザーが入力に不一致タイプを入力しようとしました（私の場合は数字入力）。ユーザビリティを向上させるために、ポップアップを表示して、入力が「壊れている」と思うよりもむしろ無効なデータを入力しようとしていることを知らせるようにしたいと考えています。

これは、簡単にFFで純粋なJSで達成（不一致のタイプを入力することを可能にする、それだけで有効ではありません）されています

input.addEventListener('input', function() { 
    if (!this.checkValidity()) { 
     this.value = ''; 
     console.log('please enter a number!');    
    } 
} 

クロムが、しかし、有効性を実際に入力されていない何もしないので入力が空であるため、チェックは常にパスします。間違った入力を無視する以外は何もしないように見えます。

この動作を無効にする方法はありますか、そうでなければ意図した効果を達成できますか？

Answer 1

もちろん、keyupのリスナーを実行すると、押されたキーが表示されます。

<script> 
    var numInput = document.getElementById("num"); 
    numInput.addEventListener("keyup", function(e) { 
     if (isNaN(String.fromCharCode(e.which))) { 
      alert("Must be a number"); 
     } 
    }); 
</script> 

Answer 2

最後の入力値を設定してこのようにチェックしますか？

let input = document.querySelector('input'); 
let lastInput = input.value; 
input.addEventListener('input', (e) => { 
    if (e.target.value === lastInput) { 
     alert("Input must be a number"); 
    } 
    lastInput = e.target.value; 
});