Tengo un elemento de entrada y el deseo de mantener el control de la longitud de los contenidos y siempre y cuando la longitud es igual a un tamaño en particular, quiero activar el botón de envío, pero estoy frente a un problema con el evento onchange de javascript a medida que el evento se activa sólo cuando el elemento de entrada está fuera de ámbito y no cuando cambie el contenido.

<input type="text" id="name" onchange="checkLength(this.value)" />

—-onchange no fuego en el cambio de contenidos de nombre, pero sólo se desencadena cuando el nombre va fuera de foco.

Hay algo que puedo hacer para hacer de este evento de trabajo en cambio de contenido? o someother caso de que puedo usar para esto?
He encontrado una solución mediante el uso de la onkeyup función, pero que no se desencadena cuando seleccionamos algunos de los contenidos de la auto integrador del navegador.

Quiero algo que puede funcionar cuando el contenido del campo de cambiar ya sea con el teclado o con el ratón…alguna idea?

  • Usted podría utilizar onkeyup y onchange?
  • El único problema que tengo es que el navegador autocompleter selección no sería motivo de cualquiera de estos eventos.
  • ¿Qué tipo de campo de entrada es esto?
  • ah…se me olvidó añadir en el código de ejemplo, un campo de texto.
  • Pensé que esto habría sido un problema muy común & muchas personas se han enfrentado a él, pero ahora parece ser al revés…:)
  • La posibilidad de ver también stackoverflow.com/a/5494697/20578

InformationsquelleAutor Sachin Midha | 2011-08-18

7 Comentarios

  1. 103
    (function () {
        var oldVal;
    
        $('#name').on('change textInput input', function () {
            var val = this.value;
            if (val !== oldVal) {
                oldVal = val;
                checkLength(val);
            }
        });
    }());

    Esto atrapará el change, las pulsaciones de teclado, paste, textInput, input (cuando esté disponible). Y no disparar más de lo necesario.

    http://jsfiddle.net/katspaugh/xqeDj/


    Referencias:

    textInput — W3C DOM Nivel 3 tipo de evento. http://www.w3.org/TR/DOM-Level-3-Events/#events-textevents

    Un agente de usuario debe despachar este evento cuando uno o más de los caracteres tienen
    sido introducido. Estos caracteres pueden provenir de una variedad de
    fuentes, por ejemplo, los caracteres resultantes de la pulsación de una tecla o
    lanzado en un dispositivo de teclado, de la transformación de un método de entrada
    el editor, o como resultado de un comando de voz. Donde un «pegar» de la operación
    genera una simple secuencia de caracteres, es decir, un pasaje de texto
    sin ningún tipo de estructura o el estilo de la información, este tipo de evento debe ser
    generado.

    input — un HTML5 tipo de evento.

    Disparado en los controles cuando el usuario cambia el valor

    Firefox, Chrome, IE9 y otros navegadores modernos soportan.

    Este evento se produce inmediatamente después de la modificación, a diferencia de el evento onchange, que se produce cuando el elemento pierde el foco.

    • su trabajo…¿has comprobado tu código a su fin?? estaba trabajando en la selección de un autocompleter…?
    • He comprobado textInput en Chrome 15 y funciona. He comprobado input evento en IE9 y funciona también. Firefox debería apoyar DOMAttrModified, pero yo no lo tengo instalado. Estos dos eventos son lo mejor que se puede esperar, ya que los incendios en cualquier tipo de entrada de texto.
    • Comprueba input en Firefox 4 — obras.
    • Impresionante la solución….de entrada, trabajó para mí como una bendición…nada más, excepto de entrada es necesario, que sí funciona lo suficiente. funciona en ff4, pero no en 3.x, & había 3.6 en mi escritorio & nunca funcionó…
    • Se puede proporcionar más información sobre este evento de entrada con la que se va a enlazar el elemento aquí, no lo pude encontrar en api.jquery.com
    • nope, solo se actualiza el otro TBs al salir de la primera, quiero que la sincronización a suceder de inmediato.
    • aquí vamos: jsfiddle.net/feLBk.
    • Posiblemente véase también stackoverflow.com/a/5494697/20578
    • Por el bien de mantener las cosas actualizadas, en la actualidad esta solución disparó varias veces en una sola entrada de cambio en FF22, usted no necesita utilizar la pulsación de tecla o textinput eventos de entrada y propertychange debería ser suficiente
    • He encontrado que change, keyup, y input era la mejor combinación para cubrir IE9 y Firefox (36.0.4). El keypress evento no parecen funcionar en IE9 porque no la captura de cosas como Eliminar y Retroceso, y el input evento cubre pegar con el teclado y con el menú contextual.
    • input domina

  2. 9

    Como una extensión a katspaugh la respuesta, he aquí una manera de hacerlo para varios elementos utilizando una clase css.

       $('.myclass').each(function(){
            $(this).attr('oldval',$(this).val());
       });
    
       $('.myclass').on('change keypress paste focus textInput input',function(){
           var val = $(this).val();
           if(val != $(this).attr('oldval') ){
               $(this).attr('oldval',val); 
               checkLength($(this).val());
            }
        });
  3. 2

    Hacer el jQuery manera:

    <input type="text" id="name" name="name"/>
    
    
    $('#name').keyup(function() {
      alert('Content length has changed to: '+$(this).val().length);
    });
    • Esto también sólo se desencadena cuando el campo pierde focues.
    • Kling, es cierto, cambió a keyup() 😉
    • de nuevo el mismo problema con keyup…lo he usado & tuve un problema con eso. leer mi pregunta completa.
  4. 0

    Puede utilizar onkeyup

    <input id="name" onkeyup="checkLength(this.value)" />
    • He utilizado onkeyup…pero mi problema es cuando el usuario selecciona de la autocompleter del navegador, a continuación, este evento no se activa…ya he escrito esto en mi pregunta en la solución que utiliza…
  5. 0

    Tendría que utilizar una combinación de onkeyup y onclick (o onmouseup) si desea ver todas las posibilidades.

    <input id="name" onkeyup="checkLength(this.value)" onmouseup="checkLength(this.value)" />
    • buen intento, pero la cuestión aquí es que no estoy pulsando el ratón sobre el elemento de entrada, pero en la auto-integrador, que no va a desencadenar este evento…
    • La única otra cosa que se me ocurre, y es desagradable desagradable, es setTimeout y revisar periódicamente el valor del campo… ¿Qué fue exactamente lo que usted quiera hacer?
    • Eso es muy desagradable…:D es algo similar a lo de la contraseña indicador, que indica la fortaleza de la contraseña como mantener a entrar en ella. Quiero habilitar un botón sólo cuando entró en la cadena es de longitud 10 más tenerlo desactivado. Espero que te tengo…
  6. 0

    Aquí hay otra solución que desarrollar para el mismo problema. Sin embargo, yo uso muchos cuadros de entrada por lo que me mantengo valor antiguo como un usuario definido por el atributo de los elementos de la misma: «los datos de valor». El uso de jQuery es muy fácil de manejar.

            $(document).delegate('.filterBox', 'keyup', { self: this }, function (e) {
                var self = e.data.self;
    
                if (e.keyCode == 13) {
                    e.preventDefault();
                    $(this).attr('data-value', $(this).val());
                    self.filterBy(this, true)
                }
                else if (e.keyCode == 27) {
                    $(this).val('');
                    $(this).attr('data-value', '');
                    self.filterBy(this, true)
                }
                else {
                    if ($(this).attr('data-value') != $(this).val()) {
                        $(this).attr('data-value', $(this).val());
                        self.filterBy(this);
                    }
                }
            });

    aquí está, he utilizado 5-6 de entrada de la caja de la clase ‘filterBox’,
    Puedo hacer filterBy método de ejecutar sólo si los datos de valor es diferente de su propio valor.

  7. 0

    Me tomó 30 minutos para encontrarlo, pero esto es trabajo en junio de 2019.

    <input type="text" id="myInput" oninput="myFunction()">

    y si quieres añadir un detector de eventos mediante programación en js

    inputElement.addEventListener("input", event => {})

Dejar respuesta

Please enter your comment!
Please enter your name here