Cómo evitar que los caracteres no válidos de ser escrito en campos de entrada

Onkeydown, corro el siguiente JavaScript:Cómo evitar que los caracteres no válidos de ser escrito en campos de entrada

function ThisOnKeyDown(el) { 
    if (el.title == 'textonly') { 
     !(/^[A-Za-zÑñ-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-\s]/ig, '') : null; 
    } 
    if (el.title == 'numbersonly') { 
     !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null; 
    } 
    if (el.title == 'textandnumbers') { 
     !(/^[A-Za-zÑñ0-9-\s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-\s]/ig, '') : null; 
    } 
}

Uno de estos tres atributos title se da a diversos campos de entrada en la página. El código funciona en la medida en que los caracteres no válidos se borren correctamente, pero no hasta que se ingrese el siguiente carácter. En primer lugar, quiero encontrar una manera de negar la entrada no válida. ¡Aprecio tu ayuda!

Editar: creo los eventos globalmente. He aquí cómo lo hago:

 function Globalization() { 
     var inputs = document.getElementsByTagName('input'); 
     for (i = 0; i < inputs.length; i++) { 
      inputs[i].onfocus = createEventHandler(
       ThisOnFocus, inputs[i]); 
      inputs[i].onblur = createEventHandler(
       ThisOnBlur, inputs[i]); 
      inputs[i].onkeydown = createEventHandler(
       ThisOnKeyDown, inputs[i]); 
      inputs[i].onkeyup = createEventHandler(
       ThisOnKeyUp, inputs[i]); 
     } 
    }

Globalization() se ejecuta body.onload

Por lo tanto, un campo de entrada típica tiene HTML sin función llama así:

  <input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/>

Fuente

2011-11-26 Mike

agrega esta función a 'OnKeyPress' y' OnKeyUp' – sll

Solo recuerda que este tipo de validación no es suficiente y que siempre has eliminado este lado del servidor de chars. –

@sll, agregando a Onkeyup da un efecto de retroceso. (Onkeypress hace lo mismo). Lo que quiero hacer es negar la entrada que siempre aparece. – Mike

Para evitar que se establezca en primer lugar, puede devolver false en el manejador de eventos keydown, evitando así que el evento se propague más.

Escribí el ejemplo a continuación usando jQuery, pero puede usar la misma función cuando vincula tradicionalmente.

Aunque también es importante validar por el lado del servidor, la validación del lado del cliente es importante por el bien de la facilidad de uso.

$("input.number-only").bind({ 
    keydown: function(e) { 
     if (e.shiftKey === true) { 
      if (e.which == 9) { 
       return true; 
      } 
      return false; 
     } 
     if (e.which > 57) { 
      return false; 
     } 
     if (e.which==32) { 
      return false; 
     } 
     return true; 
    } 
});

Fuente

2012-09-28 15:27:23 user1034772

ejecutar el código contra el evento onkeyup y no el evento onkeydown. De esta forma puede acceder al resultado de la última pulsación de tecla donde se ejecuta el evento onkeyup cuando se presiona una tecla sin conocer su resultado.

Fuente

2011-11-26 23:06:22 austincheney

Lo había intentado. Hace un efecto similar al de retroceso. – Mike

No debería. Uso este evento en mi propia aplicación y funciona muy bien. Para ver lo que estoy haciendo solo vaya al siguiente enlace y comience a escribir el código. http://prettydiff.com/?m=beautify – austincheney

No estoy seguro incluso de qué campo mirar en esa página, pero no funcionará para mí. – Mike

me encontré con esta solución en: http://help.dottoro.com/ljlkwans.php

funciona como está previsto.

<script type="text/javascript"> 
    function FilterInput (event) { 
     var keyCode = ('which' in event) ? event.which : event.keyCode; 

     isNumeric = (keyCode >= 48 /* KeyboardEvent.DOM_VK_0 */ && keyCode <= 57 /* KeyboardEvent.DOM_VK_9 */) || 
        (keyCode >= 96 /* KeyboardEvent.DOM_VK_NUMPAD0 */ && keyCode <= 105 /* KeyboardEvent.DOM_VK_NUMPAD9 */); 
     modifiers = (event.altKey || event.ctrlKey || event.shiftKey); 
     return !isNumeric || modifiers; 
    } 
</script> 

< body> 
The following text field does not accept numeric input: 
<input type="text" onkeydown="return FilterInput (event)" />< /body>

que permite que el texto y! "# $% & pero se puede ajustar la adición de estos a la validationto sólo permiten un número quitando el! En el retorno

Fuente

2012-12-15 17:29:46 rui

Código es útil para prevenir usuario escriba cualquier otro carácter excepto número.

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script> 
      function keyispressed(e){ 
       var charval= String.fromCharCode(e.keyCode); 
       if(isNaN(charval)){ 
        return false; 
       } 
       return true; 
      } 
     </script> 
    </head> 

    <body> 
     <input type="text" onkeydown="return keyispressed(event);"/> 
    </body> 
</html>

Fuente

2014-07-17 15:20:22

Digno de mención: este código también evita cosas como el retroceso y la selección de shif + flecha. – nordhagen

El código anterior se dice- permite SÓLO números. Usted puede modificarlo mediante la adición de excepción decir RETROCESO por ejemplo como este

<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script> 
      function keyispressed(e){ 
       var charval= String.fromCharCode(e.keyCode); 
       if((isNaN(charValue)) && (e.which != 8)){ // BSP KB code is 8 
        e.preventDefault(); 
       } 
       return true; 
      } 
     </script> 
    </head> 

    <body> 
     <input type="text" onkeydown="return keyispressed(event);"/> 
    </body> 
</html>

Fuente

2015-05-01 16:37:45

Ese es un punto muy bueno, perdido por otros. –

$('.key-filter').keypress(function() { 
    if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault(); 
});

continuación, agregar la clase de filtro llave de su entrada si el uso de jQuery o

<input type="text" onkeypress="if (event.key.replace(/[^\w\-.]/g,'')=='') event.preventDefault();" />

sólo hay que poner los charaters que desea permitir en el interior del [] después de la ^. esto permite todos los números de letras _ - y.

Fuente

2017-05-03 17:58:20 user2415200

Cómo evitar que los caracteres no válidos de ser escrito en campos de entrada

Respuesta

Cuestiones relacionadas