Evento de entrada de fuego con jQuery

Question

Tengo un evento de entrada en un área de texto para verificar la altura y cambiar su tamaño. Ahora necesito editar el valor a veces. Hago esto simplemente editando el val() en jQuery, pero eso no desencadena el evento oninput. ¿Hay alguna manera de desencadenar el evento oninput programáticamente con jQuery?

Answer 1

oninput aún no está en JQuery.

Se puede ver puestos sobre él aquí:

http://forum.jquery.com/topic/html5-oninput-event

http://bugs.jquery.com/ticket/9121

Básicamente, el consenso general es que ellos no quieren todavía.

Pero no, cambiar val() directamente no activará la entrada de html5 porque su especificación indica que es cuando el usuario, en la interfaz de usuario, cambia el valor de la entrada.

Editar:

Sin embargo alguien amablemente ha hecho un plugin para las personas que deseen utilizar HTML5 únicos eventos: https://github.com/dodo/jquery-inputevent

Answer 2

Simplemente puede invocar, por ejemplo .:

$("input")[0].oninput = function() { 
    alert("hello"); 
}; 

$("input")[0].oninput(); 

... pero como señala @Sammaye, jQuery no tiene explícita "oninput" manipulador, por lo que tendrá que utilizar POJS.

Demo on JS Fiddle.

Answer 3

Puede enlazar a la entrada y el cambio:

entrada habrá activado en la entrada del usuario

cambio se activará en el cambio() yt O Val (" ") asignaciones, pero después de algunos cambios

$("#textarea").bind("input change", function() { 
    alert("change happend"); 
}); 
... 

después de que aglutinaba a cambio puede llamar manualy en cada val ("") Asignación:

$("#textarea").val("text").change(); 

o puede sobrescribir jQuery val (" ") método para desencadenar cambio en cada val usuario ("") llamada:

(function ($) { var fnVal = $.fn.val; 
    $.fn.val = function(value) { 
     if (typeof value == 'undefined') { 
      return fnVal.call(this); 
     } 
     var result = fnVal.call(this, value); 
     $.fn.change.call(this); // calls change() 
     return result; 
    }; 
})(jQuery); 

Answer 4

Es demasiado tarde, pero para referencia futura, está el método .trigger.

$("#testArea").on("input", function(e) { 
 
    $("#outputArea").text($(e.target).val()) 
 
}); 
 

 
$("#testArea").val("This is a test"); 
 
$("#testArea").trigger("input");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input id="testArea" type="text" /> 
 
<div id="outputArea"></div>

Answer 5

Pruebe con "pulsación de tecla" o "keydown".

Ejemplo 1:

$("#textarea").keypress(function(){ 
    alert($("#textarea").val()); 
}); 

Ejemplo 2:

$("#textarea").keydown(function(){ 
    alert($("#textarea").val()); 
}); 

Answer 6

empuje SNIPPET ejecutar código para ver resultados

i ha estado buscando un mejor ejemplo para unirse a un rango de entrada a un valor de entrada y así modifiqué el ejemplo de Fernando en un plugin JQuery, por lo que: para cada <input type="range" min="1" max="100" value="50" id="range1"> tendrá su valor: <input type="text" disabled id="value" class="range1" value="0"> así es como para cualquier rango padres id = "Rango1" hay una Identificación del niño = "valor" class = "Rango1"

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

 

 
1<input type="range" min="1" max="100" value="50" id="range1"><input type="text" disabled id="value" class="range1" value="0"><br> 
 
2<input type="range" min="1" max="100" value="50" id="range2"><input type="text" disabled id="value" class="range2" value="0"><br> 
 
3<input type="range" min="1" max="100" value="50" id="range3"><input type="text" disabled id="value" class="range3" value="0"><br> 
 
4<input type="range" min="1" max="100" value="50" id="range4"><input type="text" disabled id="value" class="range4" value="0"><br> 
 
...<br> 
 
n<input type="range" min="1" max="100" value="50" id="rangen"><input type="text" disabled id="value" class="rangen" value="0"><br> 
 

 

 
<script type="text/javascript"> 
 
<!-- 
 
$(document).ready(function() { 
 
    $('input').on("input",function(){ 
 
    $('input').each(function(index) { 
 
     //console.log('1 '+index + ': ' + $(this).text()+',id='+$(this).attr('id')); 
 
     if($(this).attr('id')=='value'){ 
 
     //console.log('2 class='+$(this).attr('class')); 
 
     var obj=$('input#'+$(this).attr('class')); 
 
     var hisvalue=$(this); 
 
     //console.log('3 parent`s value='+obj.val()); 
 
     obj.on("input",function(){ 
 
      hisvalue.val(obj.val()); 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
    $('input').trigger("input"); 
 
}); 
 
//--> 
 
</script>