jquery - respuestas - sistema de encuesta en php y mysql gratis

¿Cómo implemento el cambio de<input type="text"> con jQuery?

Question

<select> tiene esta API. ¿Qué pasa con <input> ?

Answer 1

Aquí está el código que uso:

$("#tbSearch").on(''change keyup paste'', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

Esto funciona muy bien, especialmente cuando se combina con un control jqGrid . Puede escribir en un cuadro de texto e inmediatamente ver los resultados en su jqGrid .

Answer 2

Como @pimvdb dijo en su comentario,

Tenga en cuenta que el cambio solo se disparará cuando el elemento de entrada haya perdido el foco. También está el evento de entrada que se activa cada vez que el cuadro de texto se actualiza sin necesidad de perder el foco. A diferencia de los eventos clave, también funciona para pegar / arrastrar texto.

(Ver documentation )

Esto es tan útil, vale la pena ponerlo en una respuesta. Actualmente (v1.8 *?) No hay .input () conveniencia fn en jquery, entonces la forma de hacerlo es

$(''input.myTextInput'').on(''input'',function(e){
 alert(''Changed!'')
});

Answer 3

Esto funcionó para mí. Si se hace clic en el campo con el nombre fieldA o se ingresa cualquier tecla, se actualiza el campo con idB campoB .

jQuery("input[name=''fieldA'']").on("input", function() {
    jQuery(''#fieldB'').val(jQuery(this).val());
});

Answer 4

Hay una y única forma confiable de hacerlo , y es tirando del valor en un intervalo y comparándolo con un valor en caché.

La razón por la cual esta es la única forma es porque hay varias maneras de cambiar un campo de entrada usando varias entradas (teclado, mouse, pegar, historial del navegador, entrada de voz, etc.) y nunca se pueden detectar todas usando eventos estándar en una cruz -un entorno de navegador.

Afortunadamente, gracias a la infraestructura de eventos en jQuery, es bastante fácil agregar su propio evento de cambio de entrada. Lo hice aquí:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, ''timer'', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, ''cache'') != val ) {
                $.data( self, ''cache'', val );
                $( self ).trigger( ''inputchange'' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, ''timer'') );
    },
    add: function() {
        $.data(this, ''cache'', this.value);
    }
};

Úselo como: $(''input'').on(''inputchange'', function() { console.log(this.value) });

Hay una demostración aquí: http://jsfiddle.net/LGAWY/

Si tiene miedo a los intervalos múltiples, puede vincular / desvincular este evento en focus / blur .

Answer 5

Lo siguiente funcionará incluso si se trata de llamadas dinámicas / Ajax.

Guión:

jQuery(''body'').on(''keyup'',''input.addressCls'',function(){
  console.log(''working'');
});

Html,

<input class="addressCls" type="text" name="address" value="" required/>

Espero que este código de trabajo ayude a alguien que está tratando de acceder dinámicamente / llamadas Ajax ...

Answer 6

Puede usar keypress .

Por ejemplo, considere el HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

El controlador de eventos se puede vincular al campo de entrada:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Estoy totalmente de acuerdo con Andy; todo depende de cómo quieras que funcione.

Answer 7

Puedes usar .change()

$(''input[name=myInput]'').change(function() { ... });

Sin embargo, este evento solo se activará cuando el selector haya perdido el foco, por lo que deberá hacer clic en otro lugar para que funcione.

Si eso no es lo correcto para ti, podrías usar algunos de los otros eventos de jQuery como keyup , keydown o keypress , dependiendo del efecto exacto que desees.

Answer 8

Simplemente podría trabajar con la identificación

$("#your_id").on("change",function() {
    alert(this.value);
});

Answer 9

Sugeriría usar el evento keyup algo como a continuación:

$(''elementName'').keyup(function() {
 alert("Key up detected");
});

Hay algunas maneras de lograr el mismo resultado, así que supongo que depende de la preferencia y depende de cómo quiera que funcione exactamente.

Actualización: Esto solo funciona para la entrada manual, no para copiar y pegar.

Para copiar y pegar, recomendaría lo siguiente:

$(''elementName'').on(''input'',function(e){
 // Code here
});

Answer 10

$("input").change(function () {
    alert("Changed!");
});

Answer 11

$("input").keyup(function () {
    alert("Changed!");
});

Answer 12

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on(''change keyup paste'', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

Recomiendo usar this palabra clave para tener acceso a todo el elemento para que pueda hacer todo lo que necesita con este elemento.