jQuery ‘input’ event

Eu nunca ouvi falar de um evento no jQuery chamado input até que vi este jsfiddle .

Você sabe porque está funcionando? É um alias para keyup ou algo assim?

 $(document).on('input', 'input:text', function() {}); 

Ocorre quando o conteúdo de texto de um elemento é alterado por meio da interface do usuário.

Não é bem um apelido para keyup porque o keyup será keyup mesmo se a chave não fizer nada (por exemplo: pressionar e soltar a tecla Control ativará um evento de keyup ).

Uma boa maneira de pensar sobre isso é assim: é um evento que é acionado sempre que a input é alterada. Isso inclui – mas não se limita a – pressionar teclas que modificam a input (assim, por exemplo, Ctrl por si só não acionará o evento, mas Ctrl-V para colar algum texto), selecionando uma opção de preenchimento automático, No estilo do meio, clique em colar, arrastar e soltar e muitas outras coisas.

Veja esta página e os comentários sobre esta resposta para mais detalhes.

oninput evento oninput é muito útil para rastrear mudanças nos campos de input.

No entanto, não é suportado na versão do IE <9. Mas versões mais antigas do IE têm seu próprio evento proprietário onpropertychange que faz o mesmo que oninput .

Então você pode usar assim:

 $(':input').on('input propertychange'); 

Para ter um suporte completo de crossbrowser.

Como a alteração de propriedade pode ser acionada para QUALQUER alteração de propriedade, por exemplo, a propriedade desativada é alterada e, em seguida, você deseja include isso:

 $(':input').on('propertychange input', function (e) { var valueChanged = false; if (e.type=='propertychange') { valueChanged = e.originalEvent.propertyName=='value'; } else { valueChanged = true; } if (valueChanged) { /* Code goes here */ } }); 

Usando jQuery, o seguinte é idêntico no efeito:

 $('a').click(function(){ doSomething(); }); $('a').on('click', function(){ doSomething(); }); 

Com o evento de input , no entanto, apenas o segundo padrão parece funcionar nos navegadores que testei.

Assim, você esperaria que isso funcionasse, mas NÃO (pelo menos atualmente):

 $(':text').input(function(){ doSomething(); }); 

Novamente, se você quisesse aproveitar a delegação de events (por exemplo, para configurar o evento no #container antes que sua #container fosse adicionada ao DOM), isso deve ser lembrado:

 $('#container').on('input', ':text', function(){ doSomething(); }); 

Infelizmente, mais uma vez, não funciona atualmente!

Apenas este padrão funciona:

 $(':text').on('input', function(){ doSomething(); }); 

EDITADO COM MAIS INFORMAÇÕES ATUAIS

Eu certamente posso confirmar que esse padrão:

 $('#container').on('input', ':text', function(){ doSomething(); }); 

AGORA FUNCIONA também, em todos os navegadores ‘padrão’.

Como claustrofob disse, oninput é suportado para o IE9 +.

No entanto , “O evento oninput é buggy no Internet Explorer 9. Ele não é triggersdo quando caracteres são excluídos de um campo de texto através da interface do usuário somente quando caracteres são inseridos. Embora o evento onpropertychange seja suportado no Internet Explorer 9, mas semelhante ao oninput evento, também é buggy, não é acionado na exclusão.

Como os caracteres podem ser excluídos de várias maneiras (teclas Backspace e Delete, CTRL + X, comando Cut e Delete no menu de contexto), não há uma boa solução para detectar todas as alterações. Se os caracteres forem excluídos pelo comando Excluir do menu de contexto, a modificação não poderá ser detectada em JavaScript no Internet Explorer 9. ”

Eu tenho bons resultados vinculando a input e keyup (e keydown, se você quer triggersr no IE, mantendo pressionada a tecla Backspace).

Tenha cuidado ao usar o INPUT. Este evento é acionado em foco e em desfoque no IE 11. Mas é acionado em alterações em outros navegadores.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Eu acho que ‘input’ simplesmente funciona aqui da mesma forma que ‘oninput’ faz no Modelo de Evento do DOM Nível O.

Aliás:

Assim como silkfire comentou, eu também pesquisei por ‘evento de input jQuery’. Assim, fui levado até aqui e fiquei surpreso ao saber que ‘input’ é um parâmetro aceitável para o comando bind () do jquery. Em jQuery in Action (p. 102, 2008 ed.), ‘Input’ não é mencionado como um evento possível (contra 20 outros, de ‘blur’ a ‘unload’). É verdade que, na p. 92, o contrário poderia ser inferido da releitura (isto é, de uma referência a diferentes identificadores de strings entre os modelos de Nível 0 e Nível 2). Isso é bastante enganador.

jQuery tem a seguinte assinatura para o método .on() : .on( events [, selector ] [, data ], handler )

Os events podem ser qualquer um dos listados nesta referência:

https://developer.mozilla.org/pt-BR/docs/Web/Events

No entanto, eles não são todos suportados por todos os navegadores.

O Mozilla afirma o seguinte sobre o evento de input:

O evento de input DOM é acionado de forma síncrona quando o valor de um elemento ou é alterado. Além disso, ele é acionado em editores de conteúdo editável quando seu conteúdo é alterado.

 $("input#myId").bind('keyup', function (e) { // Do Stuff }); 

trabalhando tanto no IE quanto no Chrome