1
00:00:00,410 --> 00:00:05,190
Este video lo retomaré donde lo dejamos y seguiremos hablando sobre esos tres eventos de Jay queery.

2
00:00:05,580 --> 00:00:10,620
Así que el próximo que quiero presentar se llama Mantener presionado para que la tecla presionar sea una

3
00:00:10,620 --> 00:00:17,730
de las formas en Jay Cory en que podemos agregar un oyente de pulsación de tecla a los elementos, así que te mostraré en los

4
00:00:17,730 --> 00:00:24,180
muelles aquí si bajamos al sección de eventos y nos fijamos en la tecla presionar y presionar la tecla y la tecla arriba

5
00:00:24,480 --> 00:00:30,900
estos son tres eventos diferentes que se activan cuando un usuario escribe algo en el teclado y las diferencias son un poco matizadas.

6
00:00:31,140 --> 00:00:37,950
Así que la pulsación de teclas se activa cada vez que presionamos una tecla y se dispara justo después de presionarla y luego

7
00:00:37,950 --> 00:00:43,180
se dispara la tecla cuando sueltamos la tecla y luego presionar la tecla es un poco diferente.

8
00:00:43,230 --> 00:00:48,720
tecla presionar una tecla y luego soltarla para que represente toda la tecla presionada arriba y abajo.

9
00:00:48,720 --> 00:00:51,390
Algunas personas le dirán que se presiona la

10
00:00:51,390 --> 00:00:52,890
Y eso no es verdad

11
00:00:52,890 --> 00:00:55,790
En realidad, se dispara entre medio y sigue el ritmo.

12
00:00:55,800 --> 00:00:57,450
Usualmente no siempre

13
00:00:57,450 --> 00:00:59,520
Entonces tenemos una gran publicación de desbordamiento de pila.

14
00:00:59,670 --> 00:01:01,580
Así que te recomiendo que leas.

15
00:01:02,160 --> 00:01:08,400
Quiero señalar esta pequeña pieza aquí, así que la tecla y la tecla darán un código que indica qué tecla

16
00:01:08,400 --> 00:01:12,370
se presionará mientras se presiona la tecla indicando qué carácter se ingresó.

17
00:01:12,810 --> 00:01:19,050
Así que un buen ejemplo de esto es que si tengo una entrada de texto y alguien escribe shift y luego a

18
00:01:19,050 --> 00:01:26,400
y están tratando de hacer una mayúscula, una tecla hacia abajo y la tecla disparará en la tecla Mayús y en la minúscula una tecla VS

19
00:01:27,200 --> 00:01:33,840
la prensa activará una mayúscula, por lo que en realidad me da el carácter no solo de que la tecla es la que se

20
00:01:33,840 --> 00:01:38,520
presionó y en qué orden, sino el carácter del resultado final real cuando usamos una tecla modificadora

21
00:01:38,790 --> 00:01:42,860
como shift al final del día los tres diferentes los eventos son muy similares

22
00:01:42,930 --> 00:01:48,000
Y la mayoría de las veces puedes salirte con la tuya con cualquiera de ellas y voy a presionar

23
00:01:48,000 --> 00:01:54,730
Shoki simplemente porque es la más común, así que presionar la tecla funciona igual que hacer clic donde seleccionamos algo con el signo de dólar.

24
00:01:54,750 --> 00:01:57,600
Así que aquí hay un ejemplo que selecciona algo con signo de dólar.

25
00:01:57,600 --> 00:02:03,480
Y luego cambiamos al presionar la tecla y pasamos una función de devolución de llamada y esa función de devolución

26
00:02:03,480 --> 00:02:10,100
de llamada se llamará cada vez que se active un evento de pulsación de tecla en el elemento o colección de elementos seleccionados.

27
00:02:10,110 --> 00:02:17,520
Así que voy a demostrar que ahora volveré a mi HMO y agreguemos un tipo de entrada igual

28
00:02:18,690 --> 00:02:19,750
a texto así.

29
00:02:20,250 --> 00:02:23,660
Y lo dejaremos así y actualizaremos nuestra página.

30
00:02:24,340 --> 00:02:26,090
OK, entonces ahora tenemos una entrada aquí.

31
00:02:26,550 --> 00:02:31,900
Y obtengamos un código que simplemente cancelará ese registro cada vez que se presione una tecla aquí.

32
00:02:32,190 --> 00:02:39,800
Así que abra la consola y primero tenemos que seleccionar la entrada para que podamos hacer entradas como esa.

33
00:02:40,380 --> 00:02:42,800
Y eso no es muy específico en este caso.

34
00:02:42,810 --> 00:02:44,790
Solo hay una entrada, así que está bien.

35
00:02:44,910 --> 00:02:51,480
Pero si tuviéramos casillas de verificación y si tuviéramos entradas de color y botones de

36
00:02:51,480 --> 00:02:54,740
opción, querríamos especificar solo el tipo de texto.

37
00:02:55,290 --> 00:02:57,370
Pero por ahora la entrada está bien.

38
00:02:57,390 --> 00:03:03,280
Asegúrate de que hacemos las cosas bien para seleccionarlo, luego agregamos esa tecla presionar así.

39
00:03:03,660 --> 00:03:11,480
Y luego, dentro de aquí, agregamos una función de devolución de llamada que se llamará cada vez que se presione una tecla.

40
00:03:11,490 --> 00:03:21,220
Entonces, en este caso, simplemente hagamos que cancele el registro que ha presionado una tecla y presione enter.

41
00:03:21,840 --> 00:03:24,470
Y ahora si voy aquí y escribo una clave.

42
00:03:24,510 --> 00:03:26,530
Así que estoy golpeando la letra P en este momento.

43
00:03:26,910 --> 00:03:33,060
Puedes ver que te hago presionar la tecla y si escribo otra tecla Todo lo que hace es mostrarme un número aquí.

44
00:03:33,060 --> 00:03:34,770
Así es como lo hace Chrome.

45
00:03:34,770 --> 00:03:38,480
Pero obtengo un registro de conceptos diferente a medida que escribo para cada personaje.

46
00:03:38,820 --> 00:03:44,040
Así que así es como pudimos cancelar ese registro para ponerle un carácter a algo que a menudo deseamos hacer

47
00:03:44,190 --> 00:03:46,630
es ejecutar algún código dependiendo de qué carácter fue presionado.

48
00:03:46,650 --> 00:03:52,470
y hará una nueva tarea y luego borrará la entrada para que no tiene que hacer clic en un botón como enviar.

49
00:03:52,890 --> 00:03:58,890
Vamos a hacer una aplicación de la lista de tareas pendientes con Jay Querrey donde puedes escribir algo nuevo para hacer como Walk the

50
00:03:59,100 --> 00:04:01,520
dog y presionar Enter, que luego tomará ese texto aquí

51
00:04:01,560 --> 00:04:02,900
Simplemente presiona la tecla Intro.

52
00:04:03,180 --> 00:04:09,110
Entonces, lo que queremos hacer es escuchar presionar una tecla, pero solo hacer algo si el usuario ingresa enter.

53
00:04:09,270 --> 00:04:12,760
Para hacer eso, necesitamos cambiar nuestro código un poco aquí.

54
00:04:12,840 --> 00:04:18,640
Así que solo copiaré esto y refrescaré la página y la pegaré nuevamente.

55
00:04:18,660 --> 00:04:23,430
Así que todavía estamos escuchando la pulsación de tecla, pero vamos a trabajar con el objeto del evento.

56
00:04:23,440 --> 00:04:29,580
lo llamaré evento y este objeto contendrá toda la información sobre el evento de pulsación de tecla.

57
00:04:29,910 --> 00:04:31,890
Voy a agregar un argumento aquí

58
00:04:31,890 --> 00:04:37,260
Así que voy a cancelar ese evento de registro para que pueda ver eso y presiono enter.

59
00:04:37,260 --> 00:04:43,710
Y ahora si escribo puedo ver que estoy ingresando constantemente al evento cada vez y este evento me dice que ese

60
00:04:43,710 --> 00:04:45,200
tipo es presionar la tecla.

61
00:04:45,210 --> 00:04:49,250
Me da una marca de tiempo que me da algunas otras cosas.

62
00:04:49,350 --> 00:04:53,360
Una de las partes importantes es este código de char 106.

63
00:04:53,490 --> 00:04:56,910
También hay código de clave 1 o 6 y hay.

64
00:04:56,910 --> 00:05:00,340
Que están aquí y todos apuntan a uno o seis.

65
00:05:00,360 --> 00:05:02,870
Hay algunas pequeñas diferencias en las que no entraré.

66
00:05:03,090 --> 00:05:07,650
Vamos a seguir con qué es lo que J Querrey usa oficialmente también.

67
00:05:07,980 --> 00:05:11,860
Entonces, ¿a qué se refiere esto? Es el código de la tecla que se presionó.

68
00:05:11,910 --> 00:05:18,540
Entonces, cada clave tiene su propio código y puede mostrarle aquí los códigos de caracteres javascript.

69
00:05:18,760 --> 00:05:21,900
Hay una página aquí que te mostrará interactivamente.

70
00:05:21,900 --> 00:05:27,480
Entonces, si escribo, quiero saber qué letra ve en el código correspondiente.

71
00:05:27,480 --> 00:05:33,910
En 67 si quiero verificar qué es ingresar, necesito presionar la tecla Intro, lo cual haré ahora.

72
00:05:34,180 --> 00:05:36,570
Y me dice el código clave al final.

73
00:05:36,870 --> 00:05:40,800
Así que ese es uno de los únicos que sé de memoria porque hacemos mucho de esto cuando

74
00:05:40,800 --> 00:05:42,860
queremos que suceda algo cuando presionas la tecla Intro.

75
00:05:43,200 --> 00:05:43,440
DE ACUERDO.

76
00:05:43,440 --> 00:05:45,390
Así que recordemos ese código clave 13.

77
00:05:45,660 --> 00:05:52,020
Regrese a nuestro código aquí y todo lo que queremos hacer es escribir una declaración IF en lugar de nuestro

78
00:05:52,020 --> 00:05:54,740
oyente que dice si el usuario presiona enter.

79
00:05:54,750 --> 00:06:10,200
Entonces, si un evento que es igual a 13 significa que el usuario presiona ingresar y lo alertaremos presionando enter simplemente así

80
00:06:11,310 --> 00:06:18,250
y deshacerse de esto por ahora debido a ese registro.

81
00:06:18,870 --> 00:06:23,160
Entonces, un usuario escribe cualquier tipo de pulsación de tecla en lugar de esta entrada.

82
00:06:23,400 --> 00:06:29,160
Luego tenemos este objeto de evento que ahora agregamos a nuestra devolución de llamada que ya estaba siendo

83
00:06:29,160 --> 00:06:29,490
pasado.

84
00:06:29,520 --> 00:06:32,880
Incluso si dejamos esto fuera, no lo capturamos en una variable.

85
00:06:33,030 --> 00:06:36,160
Entonces ahora lo estamos capturando en una variable llamada evento.

86
00:06:36,210 --> 00:06:39,870
También verá esto llamado E a veces pero que se puede llamar cualquier cosa.

87
00:06:39,870 --> 00:06:41,580
Recuerda que es totalmente tu decisión.

88
00:06:41,700 --> 00:06:48,150
Y luego estamos comprobando si la propiedad que es 13, que es el código de carácter de tecla Intro.

89
00:06:48,150 --> 00:06:49,360
Presione enter.

90
00:06:50,040 --> 00:06:55,830
Y ahora veamos esto y teclearemos algunas teclas que no entran y no recibimos esas alertas.

91
00:06:55,860 --> 00:07:01,130
Obtenemos los registros del consul porque creamos el oyente original aquí.

92
00:07:01,980 --> 00:07:05,740
Pero ahora estoy borrando todo eso y escribiré algunas cosas y luego presionaré Enter.

93
00:07:06,240 --> 00:07:08,160
Y ahora te hago presionar enter.

94
00:07:08,190 --> 00:07:11,960
Así que cada vez que escribo entrar, lo haré ahora mismo.

95
00:07:12,300 --> 00:07:13,900
Me dice que presionas enter.

96
00:07:14,190 --> 00:07:14,670
Todo bien.

97
00:07:14,760 --> 00:07:19,140
Así que eso es todo lo que quiero mostrar sobre la pulsación de tecla será usar esto para hacer o hacer la lista en

98
00:07:19,140 --> 00:07:20,390
unos pocos videos a partir de ahora.

99
00:07:20,760 --> 00:07:24,150
Y también vamos a verificar si el evento es 13