キーボード監視イベント---ネイティブjs、angular、Vue（修飾子）

これは、フロントエンド検索ビジネスで、入力キーボードがトリガーされたときに検索するために一般的に使用されます。次に、ケースバイケースでデモンストレーションします。

原生Javascript中：

あらゆる形式のカプセル化および統合フレームワークは、最も基本的なjs、angular.jsvue.jsなどのすべての派生フレームワークに基づいています。

キーボード監視イベントには、最初に3つのイベントが含まれます。

    onkeydown : 按下键盘的任意键（按住可重复触发）
    onkeypress : 按下字符键触发（按住可重复触发）
    onkeyup : 按下释放的时候触发
    ontextInput: 在文本插入之前触发该事件

ネイティブトリガーのキーボードは大文字と小文字を区別します。

<form>
	<input type="text" id="myInput">
	<input type="button">
</form>


document.getElementById("myInput").setAttribute("onKeyDown","keyDetection(event)");
//Jquery
// $("#myInput").attr("onKeyDown","keyDetection(e)");
function keyDetection(e){
    
    
	// 兼容FF和IE和Opera    
    var theEvent = e || window.event;    
    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
    if (code == 13) {
    
                      
        e.preventDefault();    
       //回车执行查询
      myFunction()
    } 
}

キャリッジリターンに加えて、他のキー監視も含まれる場合があります。以下は、一般的に使用されるキー値の表です。

ここに画像の説明を挿入

角度：

<input ng-keydown.enter= "myFunction($event)" type="text">

<input class="add-inner-input" id="name" placeholder="回车添加，设置日期点右侧" ng-keypress="($event.which === 13)?myFunction():0"/>

vue.jsの修飾子

<input v-on:keyup.13="myFunction">
<input @keyup.enter="myFunction">      <!--缩写形式-->

vueで一般的に使用される修飾子：4。.stop：
クリックイベントのバブリングを防ぐために使用されます
5. .self：要素自体が子要素ではないときに現在のイベントがトリガーされる
ことを意味します6. .prevent：イベントが送信されません再
ロード7..capture：イベントがリッスンされ、イベントが発生したときに呼び出されることを示します
8.キー修飾子
.enter .tab .delete（削除およびバックスペース）.esc
.space .up .down.left。 right。ctrl.shift.alt
9. .meta ==> 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
10. v-model modify.lazy
==>デフォルトでは、v-modelは、各入力イベントがトリガーされた後、入力ボックスの値をデータと同期します（上記の入力方法の組み合わせを除く）テキスト時間）。遅延修飾子を追加して、変更イベント後に同期に切り替える
ことができます
。number==>フォーム要素を指定するように強制できるコンテンツデータ型はnumberです。トリム==>スペースを削除します。

キーボード監視イベント---ネイティブjs、angular、Vue（修飾子）

おすすめ