Evento 'input' do jQuery

Eu nunca ouvi falar de um evento no jQuery chamado inputaté ver esse jsfiddle .

Você sabe por que está funcionando? É um apelido para keyupou algo assim?

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

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

Não é um alias para, keyupporque keyupserá acionado mesmo que a tecla não faça nada (por exemplo: pressionar e soltar a tecla Control acionará um keyupevento).

Uma boa maneira de pensar sobre isso é assim: é um evento que dispara sempre que a entrada é alterada. Isso inclui - mas não se limita a - pressionar as teclas que modificam a entrada (por exemplo, Ctrlpor si só, não acionará o evento, mas Ctrl-Vcolar algum texto), selecionando uma opção de preenchimento automático, no meio do estilo Linux -clique em colar, arraste e solte e muitas outras coisas.

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

oninput O evento é muito útil para rastrear alterações nos campos de entrada.

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

Então você pode usá-lo desta maneira:

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

Para ter um suporte completo ao navegador.

Como a alteração da propriedade pode ser acionada para QUALQUER alteração de propriedade, por exemplo, a propriedade desativada é alterada, você deve incluir o seguinte:

$(':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, os seguintes são idênticos em efeito:

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

Com o inputevento, 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ê quiser aproveitar a delegação de eventos (por exemplo, para configurar o evento #containerantes de sua input.textinclusão no DOM), isso deve ser lembrado:

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

Infelizmente, novamente, NÃO funciona atualmente!

Somente esse padrão funciona:

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

EDITADO COM MAIS INFORMAÇÕES ATUAIS

Certamente posso confirmar que esse padrão:

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

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

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

No entanto , "O evento oninput é incorreto no Internet Explorer 9. Ele não é acionado quando os caracteres são excluídos de um campo de texto pela interface do usuário apenas quando os caracteres são inseridos. Embora o evento onpropertychange seja suportado no Internet Explorer 9, mas da mesma forma que o evento oninput, também é de buggy, não é acionado na exclusão.

Como os caracteres podem ser excluídos de várias maneiras (teclas Backspace e Delete, CTRL + X, Recortar e Excluir 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 entrada e keyup (e keydown, se você deseja acionar no IE enquanto mantém pressionada a tecla Backspace).

Cuidado ao usar INPUT. Este evento dispara no foco e no desfoque no IE 11. Mas é acionado na alteração em outros navegadores.

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

Acho que 'input' simplesmente funciona aqui da mesma forma que 'oninput' no DOM Level O Event Model.

Aliás:

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

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

Eventos podem ser qualquer um dos listados nesta referência:

https://developer.mozilla.org/en-US/docs/Web/Events

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

A Mozilla declara o seguinte sobre o evento de entrada:

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

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

trabalhando no IE e no chrome