html <input type = "text" /> el evento onchange no funciona

Estoy intentando hacer un experimento. Lo que quiero que suceda es que cada vez que el usuario escriba algo en el cuadro de texto, se mostrará en un cuadro de diálogo. Usé la onchangepropiedad del evento para que sucediera, pero no funciona. Todavía necesito presionar el botón de enviar para que funcione. Leí sobre AJAX y estoy pensando en aprender sobre esto. ¿Todavía necesito AJAX para que funcione o es lo suficientemente simple JavaScript? Por favor ayuda.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangesolo se activa cuando el control está borroso. Intente en su onkeypresslugar.

Úselo .on('input'...para monitorear cada cambio en una entrada (pegar, keyup, etc.) desde jQuery 1.7 y superior.

Para entradas estáticas y dinámicas:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Solo para entradas estáticas:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle con ejemplo estático / dinámico: https://jsfiddle.net/op0zqrgy/7/

La verificación de las pulsaciones de teclas es solo una solución parcial, porque es posible cambiar el contenido de un campo de entrada mediante clics del mouse. Si hace clic derecho en un campo de texto, tendrá opciones de cortar y pegar que puede usar para cambiar el valor sin presionar una tecla. Del mismo modo, si la función de autocompletar está habilitada, puede hacer clic con el botón izquierdo en un campo y obtener un menú desplegable del texto ingresado anteriormente, y puede seleccionar entre sus opciones con un clic del mouse. La captura de pulsaciones de teclas no detectará ninguno de estos tipos de cambios.

Lamentablemente, no hay ningún evento "onchange" que informe los cambios inmediatamente, al menos hasta donde yo sé. Pero hay una solución que funciona para todos los casos: configure un evento de tiempo usando setInterval ().

Digamos que su campo de entrada tiene una identificación y un nombre de "ciudad":

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

Tener una variable global llamada "ciudad":

var city = "";

Agregue esto a la inicialización de su página:

setInterval(lookForCityChange, 100);

Luego defina una función lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

En este ejemplo, el valor de "ciudad" se comprueba cada 100 milisegundos, que puede ajustar según sus necesidades. Si lo desea, use una función anónima en lugar de definir lookForCityChange (). Tenga en cuenta que su código o incluso el navegador pueden proporcionar un valor inicial para el campo de entrada, por lo que es posible que se le notifique de un "cambio" antes de que el usuario haga algo; ajuste su código según sea necesario.

Si la idea de que un evento de temporización se active cada décima de segundo parece desgarbada, puede iniciar el temporizador cuando el campo de entrada recibe el foco y terminarlo (con clearInterval ()) en un desenfoque. No creo que sea posible cambiar el valor de un campo de entrada sin que reciba el foco, por lo que encender y apagar el temporizador de esta manera debería ser seguro.

HTML5 define un oninputevento para capturar todos los cambios directos. esto funciona para mi.

onchange solo ocurre cuando el usuario confirma el cambio al elemento de entrada, la mayoría de las veces es cuando el elemento pierde el foco.

si desea que su función se active cada vez que cambia el valor del elemento, debe usar el oninputevento; esto es mejor que los eventos de tecla arriba / abajo, ya que el valor se puede cambiar con el mouse del usuario, es decir, pegarlo o autocompletar, etc.

Lea más sobre el evento de cambio aquí.

Lea más sobre el evento de entrada aquí

utilizar los siguientes eventos en lugar de "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

En primer lugar, ¿qué 'no funciona'? ¿No ves la alerta?

Además, su código podría simplificarse a esto

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Encontré problemas en los que Safari no activaba eventos "onchange" en un campo de entrada de texto. Usé un evento de "cambio" de jQuery 1.7.2 y tampoco funcionó. Terminé usando el evento de cambio de texto de ZURB. Funciona con eventos de ratón y puede disparar sin salir del campo:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Un par de comentarios que en mi opinión son importantes:

• Los elementos de entrada no emiten el evento 'cambio' hasta que la acción del USUARIO ENTRAR o el desenfoque esperan ES el comportamiento correcto .

• El evento que desea utilizar es "input"(" oninput "). Aquí está bien demostrado la diferencia entre los dos: https://javascript.info/events-change-input

• Los dos eventos señalan dos gestos / momentos diferentes del usuario (el evento "entrada" significa que el usuario está escribiendo o navegando por una lista de opciones seleccionadas, pero aún no confirmó el cambio. "Cambio" significa que el usuario cambió el valor (con una entrada o un desenfoque nuestra)

• Escuchar eventos clave como muchos de los recomendados aquí es una mala práctica en este caso. (como personas que modifican el comportamiento predeterminado de ENTER en las entradas) ...

• jQuery no tiene nada que ver con esto. Todo esto está en estándar HTML.

• Si tiene problemas para entender POR QUÉ este es el comportamiento correcto, tal vez sea útil, como experimento, use su editor de texto o navegador sin un mouse / pad, solo un teclado.

Mis dos centavos.

onkeyup funcionó para mí. onkeypress no se dispara al presionar el espacio atrás.

Es mejor usar onchange(event)con <select>. Con <input>puede utilizar el siguiente evento:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

prueba onpropertychange. solo funciona para IE.