Como detectar o conteúdo de uma caixa de texto mudou

Quero detectar sempre que o conteúdo de uma caixa de texto for alterado. Posso usar o método keyup, mas isso também detectará pressionamentos de teclas que não geram letras, como as teclas de seta. Pensei em dois métodos de fazer isso usando o evento keyup:

1. Verifique explicitamente se o código ascii da tecla pressionada é uma letra \ backspace \ delete
2. Use fechamentos para lembrar qual era o texto na caixa de texto antes do pressionamento de tecla e verifique se isso foi alterado.

Ambos parecem meio complicados.

Comece a observar o evento 'input' em vez de 'change'.

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

... que é agradável e limpo, mas pode ser estendido para:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

Use o evento onchange em HTML / JavaScript padrão.

No jQuery, esse é o evento change () . Por exemplo:

$('element').change(function() { // do something } );

EDITAR

Depois de ler alguns comentários, o que dizer de:

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

O evento 'change' não funciona corretamente, mas a 'entrada' é perfeita.

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Que tal agora:

<jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

Isso funciona no IE8 / IE9, FF, Chrome

Use fechamentos para lembrar qual era o texto na caixa de seleção antes do pressionamento de tecla e verifique se isso foi alterado.

Sim. Você não precisa usar fechamentos necessariamente, mas precisará lembrar o valor antigo e compará-lo com o novo.

Contudo! Isso ainda não pega todas as alterações, porque existem maneiras de editar o conteúdo da caixa de texto que não envolve nenhum pressionamento de tecla. Por exemplo, selecionando um intervalo de texto e clique com o botão direito do mouse em recortar. Ou arrastando-o. Ou soltar texto de outro aplicativo na caixa de texto. Ou alterando uma palavra através da verificação ortográfica do navegador. Ou...

Portanto, se você deve detectar todas as alterações, é necessário fazer uma pesquisa. Você pode window.setIntervalverificar o campo em relação ao seu valor anterior a cada (digamos) segundo. Também poderia ligar onkeyupà mesma função para que as alterações que são causadas por teclas pressionadas são reflectidos mais rápido.

Pesado? Sim. Mas é isso ou apenas faça isso da maneira normal de troca de HTML e não tente atualizar instantaneamente.

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

Você pode usar o evento 'input' para detectar a alteração do conteúdo na caixa de texto. Não use 'live' para vincular o evento, pois ele está obsoleto no Jquery-1.7; portanto, use 'on'.

Suponho que você esteja procurando fazer algo interativo quando a caixa de texto for alterada (por exemplo, recuperar alguns dados via ajax). Eu estava procurando essa mesma funcionalidade. Sei que usar uma solução global não é a solução mais robusta ou elegante, mas foi com isso que fui. Aqui está um exemplo:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

Uma coisa importante a ser observada aqui é que estou usando setTimeout e não setInterval, pois não quero enviar várias solicitações ao mesmo tempo. Isso garante que o cronômetro "pare" quando o formulário for enviado e "inicie" quando a solicitação for concluída. Eu faço isso chamando checkSearchChanged quando minha chamada ajax é concluída. Obviamente, você pode expandir isso para verificar o comprimento mínimo, etc.

No meu caso, estou usando o ASP.Net MVC para que você possa ver como vincular isso ao MVC Ajax, também na seguinte postagem:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

Eu recomendaria dar uma olhada no widget de preenchimento automático da UI do jQuery. Eles lidaram com a maioria dos casos lá, já que sua base de código é mais madura do que a maioria dos outros por aí.

Abaixo está um link para uma página de demonstração para que você possa verificar se funciona. http://jqueryui.com/demos/autocomplete/#default

Você obterá o maior benefício ao ler a fonte e ver como eles a resolveram. Você pode encontrá-lo aqui: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Basicamente, eles fazem tudo, se vinculam input, keydown, keyup, keypress, focus and blur. Então eles têm um tratamento especial para todos os tipos de chaves, como page up, page down, up arrow key and down arrow key. Um cronômetro é usado antes de obter o conteúdo da caixa de texto. Quando um usuário digita uma chave que não corresponde a um comando (tecla para cima, tecla para baixo e assim por diante), existe um timer que explora o conteúdo após cerca de 300 milissegundos. Parece com isso no código:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

O motivo para usar um timer é para que a interface do usuário tenha a chance de ser atualizada. Quando o Javascript está em execução, a interface do usuário não pode ser atualizada; portanto, a chamada para a função de atraso. Isso funciona bem para outras situações, como manter o foco na caixa de texto (usada por esse código).

Portanto, você pode usar o widget ou copiar o código em seu próprio widget se não estiver usando a interface do usuário do jQuery (ou, no meu caso, desenvolvendo um widget personalizado).

Gostaria de perguntar por que você está tentando detectar quando o conteúdo da caixa de texto mudou em tempo real ?

Uma alternativa seria definir um cronômetro (via setIntval?) E comparar o último valor salvo com o atual e, em seguida, redefinir um cronômetro. Isso garantiria capturar QUALQUER alteração, seja causada por chaves, mouse, algum outro dispositivo de entrada que você não considerasse, ou até mesmo JavaScript, alterando o valor (outra possibilidade que ninguém mencionou) de uma parte diferente do aplicativo.

você considera usar o evento de mudança ?

$("#myTextBox").change(function() { alert("content changed"); });

Use o textchangeevento através do shimmer personalizado do jQuery para inputcompatibilidade entre navegadores . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (github bifurcado mais recentemente: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Isso lida com todas as tags de entrada <textarea>content</textarea>, inclusive , que nem sempre funciona com change keyupetc. (!) Apenas o jQuery on("input propertychange")manipula as <textarea>tags de forma consistente, e o acima é um calço para todos os navegadores que não entendem o inputevento.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

Teste JS Bin

Isso também lida com colar, excluir e não duplica o esforço na digitação.

Se não estiver usando um calço, use on("input propertychange")eventos jQuery .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Há um exemplo completo de trabalho aqui .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Algo assim deve funcionar, principalmente porque focuse focusoutacabaria com dois valores separados. Estou usando dataaqui porque ele armazena valores no elemento, mas não toca no DOM. Também é uma maneira fácil de armazenar o valor conectado ao seu elemento. Você poderia facilmente usar uma variável de escopo mais alto.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Este Código detecta sempre que o conteúdo de uma caixa de texto é alterado pelo usuário e modificado pelo código Javascript.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);