Eventos de monitoreo de teclado --- js nativo, angular, Vue (modificador)

Se usa comúnmente en el negocio de búsqueda de front-end para buscar cuando se activa el teclado de entrada. A continuación, demostraremos caso por caso:

1. En Javascript nativo:

Cualquier forma de marco de encapsulación e integración se basa en los js más básicos, todos los marcos derivados como angular.js vue.js y así sucesivamente.

El evento de monitoreo del teclado primero involucra tres eventos:

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

El teclado en el disparador nativo ingresa mayúsculas y minúsculas:

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

Además del retorno de carro, también puede estar involucrado otro monitoreo de clave. La siguiente es una tabla de valores clave de uso común:

2. En 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. Modificadores en vue.js

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

Modificadores de uso común en vue:
4. .stop: se usa para evitar el burbujeo de eventos de clic
5. .self: significa que el evento actual se activa cuando el elemento en sí no es un elemento hijo
6. .prevent: significa que el evento es no enviado Volver a cargar
7. .capture: indica que el evento se escucha y se llama cuando ocurre
8. Modificador de clave
.enter .tab .delete (eliminar y retroceder) .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
==> De forma predeterminada, v-model sincroniza el valor del cuadro de entrada con los datos después de que se activa cada evento de entrada (excepto para el método de entrada anterior combinado tiempo de texto). Puede agregar el modificador perezoso para cambiar a la sincronización después del evento de cambio.
Número ==> El tipo de datos de contenido que se puede forzar a especificar el elemento del formulario es número.
Recortar ==> eliminar espacios