Como implementar a troca de <input type = "text"> com jQuery?

174

<select>tem essa API. Que tal <input>?

AMD
fonte

Respostas:

219

Você pode usar .change()

$('input[name=myInput]').change(function() { ... });

No entanto, esse evento será acionado apenas quando o seletor tiver perdido o foco, portanto, você precisará clicar em outro lugar para ter este trabalho.

Se isso não for adequado para você, você poderá usar alguns dos outros eventos do jQuery, como keyup , keydown ou keypress - dependendo do efeito exato que desejar.

Greg
fonte
Infelizmente, isso não funciona para uma entrada oculta. Uma possível solução quando exigido um onchange em uma entrada escondida é: <input type = estilo 'text' = 'display: none' /> (com css) ..
NickGreen
303
Observe que changesomente será acionado quando o elemento de entrada perder o foco. Há também o inputevento que é acionado sempre que a caixa de texto é atualizada sem que seja necessário perder o foco. Ao contrário dos principais eventos, ele também funciona para colar / arrastar texto.
Pimvdb
4
Ótimo comentário @pimvdb. Eu usei isso e o transformei em resposta a esta pergunta.
iPadDeveloper2011
1
Enquanto estou tentando isso, acabei de aprender que o evento só é acionado quando duas condições são atendidas: 1) alteração de valor; e 2) borrão, pergunto-me se o que muitas pessoas esperam da mudança () é melhor tratado pelo keyup ()?
TARKUS
Como changenão é suportado pelo IE9, você pode usar focusoutpara ter o mesmo comportamento
Soma
247

Como @pimvdb disse em seu comentário,

Observe que a alteração será acionada apenas quando o elemento de entrada tiver perdido o foco. Há também o evento de entrada que é acionado sempre que a caixa de texto é atualizada sem que seja necessário perder o foco. Ao contrário dos principais eventos, ele também funciona para colar / arrastar texto.

(Veja a documentação .)

Isso é tão útil, vale a pena colocá-lo em uma resposta. Atualmente (v1.8 *?) Não há conveniência .input () fn no jquery, portanto, a maneira de fazê-lo é

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});
iPadDeveloper2011
fonte
6
Particularmente, o IE <9 não suporta nada.
dlo
13
Desde que você pode vincular a vários eventos $('form').on('change input', function);fez o truque para mim. Obrigado.
justnorris
9
@Norris. Isso provavelmente será acionado duas vezes quando um elemento for alterado (1º) e perderá o foco (2º). Isso não é um problema para muitos propósitos, mas vale a pena notar, no entanto.
iPadDeveloper2011
Testado no IE9, backspace não será demitido
Jaskey
Observe que isso será acionado para todas as alterações de entrada feitas (que podem ser o que você está procurando). Mas, se você estiver procurando por um evento como "Quando terminar de alterar", aqui está um ótimo exemplo .
Trevor Nestman 08/12/16
79

Eu sugeriria usar o evento keyup algo como abaixo:

$('elementName').keyup(function() {
 alert("Key up detected");
});

Existem algumas maneiras de obter o mesmo resultado, então acho que é uma preferência e depende de como você deseja que ele funcione exatamente.

Atualização: Isso funciona apenas para entrada manual, não para copiar e colar.

Para copiar e colar, recomendo o seguinte:

$('elementName').on('input',function(e){
 // Code here
});
Andrew
fonte
Definitivamente, recomendo este para entradas de texto!
Vercas
20
O conteúdo do elemento de entrada pode ser alterado sem que o keyup seja acionado. Por exemplo, você pode colar texto usando o mouse.
31912 celicni
Além disso, a mudança parece ainda ser necessário para caixas de captura
turbo2oh
30

Aqui está o código que eu uso:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

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

Isso funciona muito bem, principalmente quando combinado com um jqGridcontrole. Você pode digitar em uma caixa de texto e visualizar imediatamente os resultados no seu jqGrid.

Mike Gledhill
fonte
22

Existe uma e apenas uma maneira confiável de fazer isso , e é puxando o valor em um intervalo e comparando-o com um valor em cache.

A razão pela qual essa é a única maneira é porque existem várias maneiras de alterar um campo de entrada usando várias entradas (teclado, mouse, colar, histórico do navegador, entrada de voz etc.) e você nunca pode detectar todas elas usando eventos padrão em uma cruz ambiente de navegação.

Felizmente, graças à infraestrutura de eventos no jQuery, é muito fácil adicionar seu próprio evento de troca de entrada. Eu fiz isso aqui:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

Use-o como: $('input').on('inputchange', function() { console.log(this.value) });

Há uma demonstração aqui: http://jsfiddle.net/LGAWY/

Se você tem medo de vários intervalos, pode ligar / desligar este evento em focus/ blur.

David Hellsing
fonte
É possível fazer o seu código funcionar assim $('body').on('inputchange', 'input', function() { console.log(this.value) });:? Ou não, como mencionado aqui: github.com/EightMedia/hammer.js/pull/98 ?
TheFrost 17/08/13
13
Escrever e lançar esse código é uma loucura com extremo impacto no desempenho.
Danubian Sailor
@ ŁukaszLech Por favor, conte-me sobre isso. Mas se você acertar os eventos de foco / desfoque, como também mencionei, o intervalo será executado apenas temporariamente. Certamente, mesmo uma Intel 386 de 1988 pode lidar com um único intervalo?
David Hellsing
5
<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

Eu recomendo usar a thispalavra-chave para ter acesso a todo o elemento para que você possa fazer tudo o que precisa com esse elemento.

Desenvolvedor
fonte
4

O seguinte funcionará mesmo que seja dinâmico / chamadas Ajax.

Roteiro:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

Html,

<input class="addressCls" type="text" name="address" value="" required/>

Espero que este código de trabalho ajude alguém que está tentando acessar dinamicamente / chamadas de Ajax ...

Vinith
fonte
3
$("input").keyup(function () {
    alert("Changed!");
});
Phu
fonte
2

Você poderia simplesmente trabalhar com o id

$("#your_id").on("change",function() {
    alert(this.value);
});
Siddhesh Mishra
fonte
Isso não adiciona muito às respostas existentes.
Pang
2

Você pode fazer isso de maneiras diferentes, o keyup é um deles. Mas estou dando o exemplo abaixo com a mudança.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

NB: input [name = "vat_id"] substitua pelo seu ID ou nome de entrada .

Rokan Nashp
fonte
2

Se você deseja acionar o evento enquanto digita , use o seguinte:

$('input[name=myInput]').on('keyup', function() { ... });

Se você deseja acionar o evento ao deixar o campo de entrada , use o seguinte:

$('input[name=myInput]').on('change', function() { ... });
Usman Ahmed
fonte
Por alguma razão, isso não funcionou para mim, mas funcionou:$(document).on('change', 'input[name=myInput]', function() { ... });
Stefan
1
@Stefan, o código no seu exemplo é chamado de delegação de eventos. Seus campos de entrada devem ter sido adicionados após a inicialização da página; é por isso que meu código não funcionou para você.
Usman Ahmed
1
$("input").change(function () {
    alert("Changed!");
});
Georg Schölly
fonte
4
O problema desta opção é que só funciona quando você perdeu o foco de entrada
Yises
Isso ainda servirá em alguns casos.
James Drinkard
1

Isso funcionou para mim. Se o campo com o nome fieldA for clicado ou qualquer tecla inserida, ele atualizará o campo com o id fieldB .

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});
Seefan
fonte
0

Você poderia usar .keypress().

Por exemplo, considere o HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

O manipulador de eventos pode ser vinculado ao campo de entrada:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

Eu concordo totalmente com Andy; tudo depende de como você deseja que ele funcione.

kcho0
fonte
1
Isso não funciona para operações de copiar / colar. Nenhum evento será acionado se o texto for colado com um clique do mouse.
DaveN59