Inicia sesión


Detectando las teclas especificas con jаvascript y jQuery....


jаvascript se utiliza a menudo en el lado del cliente navegador para realizar tareas sencillas que de otro modo requerirían una devolución de datos completo al servidor. Muchas de esas tareas simples implican el procesamiento de texto o caracteres introducidos en un elemento de formulario en una página web, y que a menudo es necesario conocer el código clave jаvascript asociado con un carácter. Aquí es una referencia.
<input onkeypress="jаvascript:return false;" ID="txtChar" onkeydown="jаvascript:return displayKeyCode(event)" TYPE="text" NAME="txtChar"> 

Importamos a jQuery en nuestro documento.

<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>

En jаvascript quedaría así:

<script type="text/jаvascript">
 <!--
 function displayKeyCode(evt)
 {
var textBox = getObject('txtChar');
 var charCode = (evt.which) ? evt.which : event.keyCode
 textBox.value = String.fromCharCode(charCode);
 if (charCode == 8) textBox.value = "backspace"; //  backspace
 if (charCode == 9) textBox.value = "tab"; //  tab
 if (charCode == 13) textBox.value = "enter"; //  enter
 if (charCode == 16) textBox.value = "shift"; //  shift
 if (charCode == 17) textBox.value = "ctrl"; //  ctrl
 if (charCode == 18) textBox.value = "alt"; //  alt
 if (charCode == 19) textBox.value = "pause/break"; //  pause/break
 if (charCode == 20) textBox.value = "caps lock"; //  caps lock
 if (charCode == 27) textBox.value = "escape"; //  escape
 if (charCode == 33) textBox.value = "page up"; // page up, to avoid displaying alternate character and confusing people         
 if (charCode == 34) textBox.value = "page down"; // page down
 if (charCode == 35) textBox.value = "end"; // end
 if (charCode == 36) textBox.value = "home"; // home
 if (charCode == 37) textBox.value = "left arrow"; // left arrow
 if (charCode == 38) textBox.value = "up arrow"; // up arrow
 if (charCode == 39) textBox.value = "right arrow"; // right arrow
 if (charCode == 40) textBox.value = "down arrow"; // down arrow
 if (charCode == 45) textBox.value = "insert"; // insert
 if (charCode == 46) textBox.value = "delete"; // delete
 if (charCode == 91) textBox.value = "left window"; // left window
 if (charCode == 92) textBox.value = "right window"; // right window
 if (charCode == 93) textBox.value = "select key"; // select key
 if (charCode == 96) textBox.value = "numpad 0"; // numpad 0
 if (charCode == 97) textBox.value = "numpad 1"; // numpad 1
 if (charCode == 98) textBox.value = "numpad 2"; // numpad 2
 if (charCode == 99) textBox.value = "numpad 3"; // numpad 3
 if (charCode == 100) textBox.value = "numpad 4"; // numpad 4
 if (charCode == 101) textBox.value = "numpad 5"; // numpad 5
 if (charCode == 102) textBox.value = "numpad 6"; // numpad 6
 if (charCode == 103) textBox.value = "numpad 7"; // numpad 7
 if (charCode == 104) textBox.value = "numpad 8"; // numpad 8
 if (charCode == 105) textBox.value = "numpad 9"; // numpad 9
 if (charCode == 106) textBox.value = "multiply"; // multiply
 if (charCode == 107) textBox.value = "add"; // add
 if (charCode == 109) textBox.value = "subtract"; // subtract
 if (charCode == 110) textBox.value = "decimal point"; // decimal point
 if (charCode == 111) textBox.value = "divide"; // divide
 if (charCode == 112) textBox.value = "F1"; // F1
 if (charCode == 113) textBox.value = "F2"; // F2
 if (charCode == 114) textBox.value = "F3"; // F3
 if (charCode == 115) textBox.value = "F4"; // F4
 if (charCode == 116) textBox.value = "F5"; // F5
 if (charCode == 117) textBox.value = "F6"; // F6
 if (charCode == 118) textBox.value = "F7"; // F7
 if (charCode == 119) textBox.value = "F8"; // F8
 if (charCode == 120) textBox.value = "F9"; // F9
 if (charCode == 121) textBox.value = "F10"; // F10
 if (charCode == 122) textBox.value = "F11"; // F11
 if (charCode == 123) textBox.value = "F12"; // F12
 if (charCode == 144) textBox.value = "num lock"; // num lock
 if (charCode == 145) textBox.value = "scroll lock"; // scroll lock
 if (charCode == 186) textBox.value = ";"; // semi-colon
 if (charCode == 187) textBox.value = "="; // equal-sign
 if (charCode == 188) textBox.value = ","; // comma
 if (charCode == 189) textBox.value = "-"; // dash
 if (charCode == 190) textBox.value = "."; // period
 if (charCode == 191) textBox.value = "/"; // forward slash
 if (charCode == 192) textBox.value = "`"; // grave accent
 if (charCode == 219) textBox.value = "["; // open bracket
 if (charCode == 220) textBox.value = "\\"; // back slash
 if (charCode == 221) textBox.value = "]"; // close bracket
 if (charCode == 222) textBox.value = "'"; // single quote

 var lblCharCode = getObject('spnCode');
lblCharCode.innerHTML = 'KeyCode:  ' + charCode;

return false;

 }
 function getObject(obj)
  {
  var theObj;
  if (document.all) {
  if (typeof obj=='string') {
  return document.all(obj);
  } else {
  return obj.style;
  }
  }
  if (document.getElementById) {
  if (typeof obj=='string') {
  return document.getElementById(obj);
  } else {
  return obj.style;
  }
  }
  return null;
  }
 //-->

</script> 

Demostración interactiva y tabla de búsqueda

Ver Resultado

 

Y las siguientes instrucciones indica que introduciendo cualquier tecla en el cuadro de texto veras el correspondiente código de la llave jаvascript.


Cualquier número (Key Codes) de la variable..., entonces, de acuerdo con como  Obtener el valor de un campo de texto con jQuery guardamos el valor del campo en la variable valor, y damos un a alerta para que nos diga el valor de esa variable.....

Te sugiero seguir leyendo...

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-14
  • Categorias: javascript jQuery Noticias Tutorial

Códigos Javascript Char (Key Codes) Códigos Javascript Char (Key Codes)...
Tutoriales en linea
¿Te gusta el tutorial?




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Cómo jugar Ajedrez Online TL

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-18
  • Categorias: WebSite Juegos Noticias Tutorial

Cómo encontrar un teléfono Android perdido

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-17
  • Categorias: Android Telefonia Smartphone Tablet Tutorial

Configura tu servidor VPN en Windows

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-15
  • Categorias: Windows Internet Red Wifi Seguridad Noticias Tutorial

Como crear una web con el lenguaje HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web Lenguajes De Programacion CSS3 html5 Html WebSite webmasters Cursos Noticias Tutorial

Introducción Al Lenguaje JS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-09-08
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial