Detecte todas as alterações em um <input type = "text"> (imediatamente) usando JQuery

Há muitas maneiras pelas quais o valor de um <input type="text">pode mudar, incluindo:

• pressionamentos de tecla
• copiar colar
• modificado com JavaScript
• preenchido automaticamente pelo navegador ou uma barra de ferramentas

Quero que minha função JavaScript seja chamada (com o valor de entrada atual) sempre que for alterada. E quero que seja chamado imediatamente, não apenas quando a entrada perder o foco.

Estou procurando a maneira mais limpa e robusta de fazer isso em todos os navegadores (usando o jQuery de preferência).

Esse código jQuery captura alterações imediatas em qualquer elemento e deve funcionar em todos os navegadores:

 $('.myElements').each(function() {
   var elem = $(this);

   // Save current value of element
   elem.data('oldVal', elem.val());

   // Look for changes in the value
   elem.bind("propertychange change click keyup input paste", function(event){
      // If value has changed...
      if (elem.data('oldVal') != elem.val()) {
       // Updated stored value
       elem.data('oldVal', elem.val());

       // Do action
       ....
     }
   });
 });

Uma solução sofisticada em tempo real para jQuery> = 1.9

$("#input-id").on("change keyup paste", function(){
    dosomething();
})

se você também deseja detectar o evento "clique", basta:

$("#input-id").on("change keyup paste click", function(){
    dosomething();
})

se você estiver usando jQuery <= 1.4, basta usar em livevez de on.

Infelizmente, acho que setIntervalganha o prêmio:

<input type=text id=input_id />
<script>
setInterval(function() { ObserveInputValue($('#input_id').val()); }, 100);
</script>

É a solução mais limpa, com apenas 1 linha de código. Também é o mais robusto, já que você não precisa se preocupar com todos os diferentes eventos / maneiras pelas quais uma pessoa inputpode obter um valor.

As desvantagens de usar 'setInterval' não parecem se aplicar neste caso:

• A latência de 100ms? Para muitas aplicações, 100ms é rápido o suficiente.
• Adicionado carregamento no navegador? Em geral, adicionar muitos setIntervals pesados ​​na sua página é ruim. Mas, nesse caso específico, o carregamento da página adicionado é indetectável.
• Não é escalável para muitas entradas? A maioria das páginas não possui mais do que um punhado de entradas, que você pode farejar no mesmo setInterval.

A ligação ao oninputevento parece funcionar bem na maioria dos navegadores sãos. O IE9 também suporta, mas a implementação é incorreta (o evento não é acionado ao excluir caracteres).

Com o jQuery versão 1.7+, o onmétodo é útil para vincular ao evento como este:

$(".inputElement").on("input", null, null, callbackFunction);

Resposta de 2017 : o evento de entrada faz exatamente isso para algo mais recente que o IE8.

$(el).on('input', callback)

Infelizmente, não há evento ou conjunto de eventos que atenda aos seus critérios. As teclas pressionadas e copiar / colar podem ser tratadas com o keyupevento. Mudanças no JS são mais complicadas. Se você tem controle sobre o código que define a caixa de texto, sua melhor aposta é modificá-lo para chamar sua função diretamente ou acionar um evento do usuário na caixa de texto:

// Compare the textbox's current and last value.  Report a change to the console.
function watchTextbox() {
  var txtInput = $('#txtInput');
  var lastValue = txtInput.data('lastValue');
  var currentValue = txtInput.val();
  if (lastValue != currentValue) {
    console.log('Value changed from ' + lastValue + ' to ' + currentValue);
    txtInput.data('lastValue', currentValue);
  }
}

// Record the initial value of the textbox.
$('#txtInput').data('lastValue', $('#txtInput').val());

// Bind to the keypress and user-defined set event.
$('#txtInput').bind('keypress set', null, watchTextbox);

// Example of JS code triggering the user event
$('#btnSetText').click(function (ev) {
  $('#txtInput').val('abc def').trigger('set');
});

Se você não tiver controle sobre esse código, poderá usar setInterval()para 'observar' a caixa de texto para alterações:

// Check the textbox every 100 milliseconds.  This seems to be pretty responsive.
setInterval(watchTextbox, 100);

Esse tipo de monitoramento ativo não captura as atualizações 'imediatamente', mas parece ser rápido o suficiente para que não haja atraso perceptível. Como DrLouie apontou nos comentários, essa solução provavelmente não se ajusta bem se você precisar observar muitas entradas. Você sempre pode ajustar o 2º parâmetro setInterval()para verificar com mais ou menos frequência.

Aqui está uma solução ligeiramente diferente se você não gostou de nenhuma das outras respostas:

var field_selectors = ["#a", "#b"];
setInterval(function() { 
  $.each(field_selectors, function() { 
    var input = $(this);
    var old = input.attr("data-old-value");
    var current = input.val();
    if (old !== current) { 
      if (typeof old != 'undefined') { 
        ... your code ...
      }
      input.attr("data-old-value", current);
    }   
  }   
}, 500);

Considere que você não pode confiar em cliques e teclas para capturar a colagem do menu de contexto.

Adicione esse código em algum lugar, isso fará o truque.

var originalVal = $.fn.val;
$.fn.val = function(){
    var result =originalVal.apply(this,arguments);
    if(arguments.length>0)
        $(this).change(); // OR with custom event $(this).trigger('value-changed');
    return result;
};

A solução encontrada em val () não aciona change () no jQuery

Eu criei uma amostra. Que funcione para você.

var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;

var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
    clearTimeout(typingTimer);
    if ($('#tyingBox').val) {
        typingTimer = setTimeout(function () {
            $("p.content").html('Typing...');
        }, doneTypingInterval);
    }
});

$('#tyingBox').keyup(function () {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(function () {
        $("p.content").html(oldData);
    }, finaldoneTypingInterval);
});


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


<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>

http://jsfiddle.net/utbh575s/

Na verdade, não precisamos configurar loops para detectar alterações em javaScript. Já configuramos muitos ouvintes de eventos para o elemento que queremos detectar. apenas desencadear qualquer evento não prejudicial fará o trabalho.

$("input[name='test-element']").on("propertychange change click keyup input paste blur", function(){
console.log("yeh thats worked!");
});

$("input[name='test-element']").val("test").trigger("blur");

e ofc isso só estará disponível se você tiver o controle total das alterações de javascript no seu projeto.

Bem, a melhor maneira é cobrir essas três bases que você listou por si mesmo. Um simples: onblur,: onkeyup, etc não funcionará para o que você deseja, então apenas combine-os.

O KeyUp deve abranger os dois primeiros e, se o Javascript estiver modificando a caixa de entrada, espero que seja o seu próprio javascript, portanto, basta adicionar um retorno de chamada na função que o modifica.

Aqui está um exemplo de trabalho que estou usando para implementar uma variação de preenchimento automático e preenche um seletor jqueryui (lista), mas não quero que ele funcione exatamente como o preenchimento automático jqueryui que faz um menu suspenso.

$("#tagFilter").on("change keyup paste", function() {
     var filterText = $("#tagFilter").val();
    $("#tags").empty();
    $.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
        function(data) {
            var i;
            for (i = 0; i < data.length; i++) {
                var tag = data[i].value;
                $("#tags").append("<li class=\"tag\">" + tag + "</li>");
            }
        }); 
});

NO JQUERY! (É meio obsoleto nos dias de hoje)

Editar: eu removi os eventos HTML. NÃO use eventos HTML ... use ouvintes de eventos Javascript.

document.querySelector("#testInput").addEventListener("input", test);

function test(e) {
 var a = document.getElementById('output');
 var b = /^[ -~]+$/;
 if (e.target.value == '' || b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. Yes";
 } else if (!b.test(e.target.value)) {
  a.innerText = "Text is Ascii?.. No";
 }
}

Try pressing Alt+NumPad2+NumPad3 in the input, it will instantly detect a change, whether you Paste, Type, or any other means, rather than waiting for you to unselect the textbox for changes to detect.

<input id="testInput">
<br>
<a id="output">Text is Ascii?.. Yes</a>

Você não pode simplesmente usar o <span contenteditable="true" spellcheck="false">elemento no lugar de <input type="text">?

<span>(com contenteditable="true" spellcheck="false"como atributos) distingue-se <input>principalmente por:

• Não tem o estilo de um <input>.
• Ele não possui uma valuepropriedade, mas o texto é renderizado como innerTexte faz parte de seu corpo interno.
• É multilinha, <input>embora não seja, embora você defina o atributo multiline="true".

Para obter a aparência, é claro, você pode estilizá-la em CSS, enquanto escreve o valor que innerTextvocê pode obter para um evento:

Aqui está um violino .

Infelizmente, há algo que realmente não funciona no IE e no Edge, que não consigo encontrar.

Embora essa pergunta tenha sido publicada há 10 anos, acredito que ainda precise de algumas melhorias. Então aqui está a minha solução.

$(document).on('propertychange change click keyup input paste', 'selector', function (e) {
    // Do something here
});

O único problema com esta solução é que ela não será acionada se o valor mudar de como o javascript $('selector').val('some value'). Você pode disparar qualquer evento para o seu seletor quando alterar o valor do javascript.

$(selector).val('some value');
// fire event
$(selector).trigger('change');

você pode ver este exemplo e escolher quais são os eventos que lhe interessam:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>evetns</title>
</head>
<body>
<form>
    <input class="controlevents" id="i1" type="text" /><br />
    <input class="controlevents" id="i2" type="text" /><br />
    <input class="controlevents" id="i3" type="text" /><br />
    <input class="controlevents" id="i4" type="text" /><br />
    <input class="controlevents" id="i5" type="text" /><br />
</form>
<div id="datatext"></div>
</body>
</html>
<script>
$(function(){

function testingevent(ev){
    if (ev.currentTarget.tagName=="INPUT")
        $("#datatext").append("<div>id : " + ev.currentTarget.id + ", tag: " + ev.currentTarget.tagName + ", type: "+ ev.type +"</div>");
}   

    var eventlist = ["resizeend","rowenter","dragleave","beforepaste","dragover","beforecopy","page","beforeactivate","beforeeditfocus","controlselect","blur",
                    "beforedeactivate","keydown","dragstart","scroll","propertychange","dragenter","rowsinserted","mouseup","contextmenu","beforeupdate",
                    "readystatechange","mouseenter","resize","copy","selectstart","move","dragend","rowexit","activate","focus","focusin","mouseover","cut",
                    "mousemove","focusout","filterchange","drop","blclick","rowsdelete","keypress","losecapture","deactivate","datasetchanged","dataavailable",
                    "afterupdate","mousewheel","keyup","movestart","mouseout","moveend","cellchange","layoutcomplete","help","errorupdate","mousedown","paste",
                    "mouseleave","click","drag","resizestart","datasetcomplete","beforecut","change","error","abort","load","select"];

    var inputs = $(".controlevents");

    $.each(eventlist, function(i, el){
        inputs.bind(el, testingevent);
    });

});
</script>

Talvez eu esteja atrasado para a festa aqui, mas você não pode apenas usar o evento .change () fornecido pelo jQuery.

Você deve ser capaz de fazer algo como ...

$(#CONTROLID).change(function(){
    do your stuff here ...
});

Você sempre pode vinculá-lo a uma lista de controles com algo como ...

var flds = $("input, textarea", window.document);

flds.live('change keyup', function() {
    do your code here ...
});

O fichário ativo garante que todos os elementos que existem na página agora e no futuro sejam tratados.

Esta é a maneira mais rápida e limpa de fazer isso:

Estou usando o Jquery ->

$('selector').on('change', function () {
    console.log(this.id+": "+ this.value);
});

Está funcionando muito bem para mim.