A melhor maneira de rastrear uma troca conforme você digita em input type = "text"?

Na minha experiência, o input type="text" onchangeevento geralmente ocorre somente depois que você sai ( blur) do controle.

Existe uma maneira de forçar o navegador a disparar onchangesempre que o textfieldconteúdo for alterado? Caso contrário, qual é a maneira mais elegante de rastrear isso "manualmente"?

O uso de onkey*eventos não é confiável, pois você pode clicar com o botão direito do mouse no campo e escolher Colar, e isso mudará o campo sem nenhuma entrada do teclado.

É setTimeouto único caminho? .. Feio :-)

Atualizar:

Veja Outra resposta (2015).

Resposta original de 2009:

Então, você deseja que o onchangeevento seja acionado com pressionamento de tecla, desfoque e cole? Isso é mágico.

Se você deseja acompanhar as alterações à medida que digitam, use "onkeydown". Se você precisar interceptar as operações de colar com o mouse, use "onpaste"( IE , FF3 ) e "oninput"( FF, Opera, Chrome, Safari ¹ ).

¹ _{Quebrado para <textarea>no Safari. Use em textInputvez disso}

Estes dias escutam oninput. Parece que onchangesem a necessidade de perder o foco no elemento. É HTML5.

É suportado por todos (inclusive dispositivos móveis), exceto o IE8 e abaixo. Para o IE, adicione onpropertychange. Eu uso assim:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

O código abaixo funciona bem para mim com o Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Javascript é imprevisível e engraçado aqui.

• onchange ocorre apenas quando você desfoca a caixa de texto
• onkeyup& onkeypressnem sempre ocorre na alteração de texto
• onkeydown ocorre na alteração do texto (mas não pode acompanhar recortar e colar com um clique do mouse)
• onpaste& oncutocorre com a tecla pressionada e até com o botão direito do mouse.

Então, para acompanhar a mudança na caixa de texto, precisamos onkeydown, oncute onpaste. No retorno de chamada desses eventos, se você verificar o valor da caixa de texto, não receberá o valor atualizado, pois o valor é alterado após o retorno de chamada. Portanto, uma solução para isso é definir uma função de tempo limite com um tempo limite de 50 mili-segundos (ou pode ser menor) para rastrear a alteração.

Este é um truque sujo, mas é o único caminho, como pesquisei.

Aqui está um exemplo. http://jsfiddle.net/2BfGC/12/

onkeyupacontece depois que você digita, por exemplo, eu pressiono tquando levanto o dedo a ação acontece, mas keydowna ação acontece antes de digitar o caracteret

Espero que isso seja útil para alguém.

Então onkeyupé melhor para quando você deseja enviar o que você acabou de digitar agora.

Eu tinha um requisito semelhante (campo de texto no estilo twitter). Usado onkeyupe onchange. onchangena verdade, cuida das operações de colar do mouse durante o foco perdido do campo.

[Atualização] No HTML5 ou posterior, use oninputpara obter atualizações de modificação de caracteres em tempo real, conforme explicado em outras respostas acima.

Eu acho que em 2018 é melhor usar o inputevento.

-

Como a especificação WHATWG descreve ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Disparado nos controles quando o usuário altera o valor (consulte também o evento de alteração )

-

Aqui está um exemplo de como usá-lo:

<input type="text" oninput="handleValueChange()">

Se você usa APENAS o Internet Explorer, pode usar o seguinte:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Espero que ajude.

existe uma solução bastante próxima (não corrija todas as maneiras de colar), mas a maioria delas:

Ele funciona tanto para entradas quanto para áreas de texto:

<input type="text" ... >
<textarea ... >...</textarea>

Faça assim:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Como eu disse, nem todas as maneiras de colar acionam um evento em todos os navegadores ... o pior é que alguns não acionam nenhum evento, mas os Temporizadores são horríveis de serem usados ​​para isso.

Mas a maioria das maneiras de Colar é feita com teclado e / ou mouse; portanto, normalmente uma ativação ou ativação do mouse são acionadas após uma colagem, também a ativação da ativação ao digitar no teclado.

Verifique se o código de verificação não leva muito tempo ... caso contrário, o usuário fica com uma impressão ruim.

Sim, o truque é acionar a tecla e o mouse ... mas cuidado, ambos podem ser acionados, então lembre-se disso !!!

Por favor, julgue a próxima abordagem usando o JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

"input" funcionou para mim.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Você pode usar as keydown, keyupe keypresseventos também.

Para rastrear cada uma, tente este exemplo e reduza completamente a taxa de piscada do cursor para zero.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: evento gera na saída

onchange: evento gera na saída se houver alguma alteração feita no texto de entrada

onkeydown: o evento é gerado com qualquer pressionamento de tecla (também por muito tempo)

onkeyup: evento gera em qualquer liberação de chave

onkeypress: o mesmo que onkeydown (ou onkeyup), mas não reagirá com ctrl, backsace, alt outros

2018 aqui, é isso que eu faço:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Se você puder apontar falhas nessa abordagem, ficaria grato.

Método 1: Adicionar um ouvinte de evento para input:

element.addEventListener("input", myFunction);

Método 2: Defina a oninputpropriedade com JavaScript:

element.oninput = function()
{
    myFunction();
};

Método 3: Defina a oninputpropriedade com HTML:

<input type="text" oninput="myFunction();">

O addEventListener de Robert Siemer não é suportado no IE8.

"As versões anteriores do IE suportavam um método EventTarget.attachEvent () equivalente e proprietário." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener