Detectar caixa de texto de entrada alterada

Examinei várias outras perguntas e encontrei respostas muito simples, incluindo o código abaixo. Eu simplesmente quero detectar quando alguém altera o conteúdo de uma caixa de texto, mas por algum motivo não está funcionando ... Não recebo erros no console. Quando defino um ponto de interrupção no navegador na change()função, ele nunca o atinge.

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

Você pode usar o inputevento Javascript no jQuery assim:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

Em JavaScript puro:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Ou assim:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

tente digitar em vez de alterar.

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

Aqui está a documentação oficial do jQuery para .keyup () .

Cada resposta está faltando alguns pontos, então aqui está a minha solução:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Os Input Eventdisparos na entrada do teclado , arrastar o mouse , preencher automaticamente e copiar e colar foram testados no Chrome e Firefox. A verificação do valor anterior faz com que ele detecte alterações reais, o que significa não disparar ao colar a mesma coisa ou digitar o mesmo caractere ou etc.

Exemplo de trabalho: http://jsfiddle.net/g6pcp/473/

atualizar:

E se você deseja executar o seu change function somente quando o usuário terminar de digitar e impedir o acionamento da ação de alteração várias vezes, tente o seguinte:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

Se o usuário começa a digitar (por exemplo, "foobar"), esse código impede que você change actionexecute todas as letras que o usuário digita e só é executado quando o usuário para de digitar. Isso é bom especialmente para quando você envia a entrada para o servidor (por exemplo, entradas de pesquisa), que servidor de maneira faz apenas uma busca para foobare não seis pesquisas para fe depois foe depois fooe foobe assim por diante.

As entradas de texto não disparam o changeevento até que elas percam o foco. Clique fora da entrada e o alerta será exibido.

Se o retorno de chamada for acionado antes que a entrada de texto perca o foco, use o .keyup()evento

onkeyup, onpaste, onchange, oninputparece estar falhando quando o navegador executa o preenchimento automático nas caixas de texto. Para lidar com esse caso, inclua " autocomplete='off'" em seu campo de texto para impedir que o navegador preencha automaticamente a caixa de texto,

Por exemplo,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

No meu caso, eu tinha uma caixa de texto anexada a um datepicker. A única solução que funcionou para mim foi lidar com isso dentro do evento onSelect do datepicker.

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Eu acho que você pode usar keydowntambém:

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

TRABALHANDO:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});