Keyboard monitoring events---native js, angular, Vue (modifier)

It is commonly used in the front-end search business to search when the enter keyboard is triggered. Next, we will demonstrate case by case:

1. In native Javascript:

Any form of encapsulation and integration framework is based on the most basic js, all derived frameworks such as angular.js vue.js and so on.

The keyboard monitoring event first involves three events:

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

The keyboard in the native trigger enter case:

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

In addition to the carriage return, other key monitoring may also be involved. The following is a table of commonly used key values:

2. In angular:

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

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

3. Modifiers in vue.js

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

Commonly used modifiers in vue:
4. .stop: used to prevent the bubbling of click events
5. .self: means that the current event is triggered when the element itself is not a child element
6. .prevent: means that the event is not submitted Reload again
7. .capture: indicates that the event is listened to, and is called when the event occurs
8. Key modifier
.enter .tab .delete (delete and backspace) .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 modifier.lazy
==> By default, v-model synchronizes the value of the input box with the data after each input event is triggered (except for the above input method combined text Time). You can add the lazy modifier to switch to synchronization after the change event.
number ==> The content data type that can be forced to specify the form element is number.
Trim ==> remove spaces