style - JQuery: detectar alteração no campo de entrada




remove and add attribute jquery (4)

Duplicata Possível:
Jquery: como detectar o conteúdo de uma caixa de texto mudou

Eu quero detectar quando as ações do teclado de um usuário alteram o valor de um campo de texto. Deve funcionar de forma consistente em todos os navegadores modernos.

A página JQuery para o evento .keypress diz que não é consistente? Além disso, não funciona para backspace, delete etc.

Eu não posso usar .keydown como é porque ele reage a shift, alt e setas chaves etc. Além disso, ele não dispara mais de uma vez quando o usuário mantém pressionada uma tecla e vários caracteres são inseridos.

Existe um método conciso que está faltando? Ou devo usar .keydown e filtrar eventos que são acionados por teclas de seta, shift e assim por diante? Minha principal preocupação é que haverá chaves que não estou ciente de que devem ser filtradas. (Eu quase me esqueci de alt e ctrl, eu suponho que poderia haver outros) Mas como eu detectaria a chave sendo pressionada e inserindo vários caracteres?

Como bônus, ele detectaria alterações devido à colagem (incluindo o clique com o botão direito), mas eu tenho a solução para isso here .


Mesma funcionalidade recentemente obtida usando a função abaixo.

Eu queria ativar o botão SALVAR na edição.

  1. O evento de mudança NÃO é aconselhável, pois só será disparado se, após a edição, o mouse for clicado em algum outro lugar da página antes de clicar no botão SALVAR.
  2. A tecla Press não controla as opções Backspace, Delete e Paste.
  3. Key Up lida com tudo, incluindo guia, tecla Shift.

Daí eu escrevi função abaixo combinando keypress, keyup (para backspace, delete) e colar eventos para campos de texto.

Espero que ajude você.

function checkAnyFormFieldEdited() {
    /*
     * If any field is edited,then only it will enable Save button
     */
    $(':text').keypress(function(e) { // text written
        enableSaveBtn();
    });

    $(':text').keyup(function(e) {
        if (e.keyCode == 8 || e.keyCode == 46) { //backspace and delete key
            enableSaveBtn();
        } else { // rest ignore
            e.preventDefault();
        }
    });
    $(':text').bind('paste', function(e) { // text pasted
        enableSaveBtn();
    });

    $('select').change(function(e) { // select element changed
        enableSaveBtn();
    });

    $(':radio').change(function(e) { // radio changed
        enableSaveBtn();
    });

    $(':password').keypress(function(e) { // password written
        enableSaveBtn();
    });
    $(':password').bind('paste', function(e) { // password pasted
        enableSaveBtn();
    });


}

Use $.on() para ligar o evento escolhido à entrada, não use os atalhos como $.keydown() etc, porque a partir do jQuery 1.7 $.on() é o método preferido para anexar manipuladores de eventos (veja aqui: http://api.jquery.com/on/ e http://api.jquery.com/bind/ ).

$.keydown() é apenas um atalho para $.bind('keydown') , e $.bind() é o que $.on() substitui (entre outros).

Para responder à sua pergunta, tanto quanto eu saiba, a menos que você precise disparar um evento no keydown especificamente, o evento de change deve fazer o truque para você.

$('element').on('change', function(){
    console.log('change');
});

Para responder ao comentário abaixo, o evento de change javascript está documentado aqui: https://developer.mozilla.org/en-US/docs/Web/Events/change

E aqui está um exemplo de trabalho do evento de change trabalhando em um elemento de entrada, usando jQuery: http://jsfiddle.net/p1m4xh08/


Você pode usar a função jQuery change ()

$('input').change(function(){
  //your codes
});

Há exemplos de como usá-lo na página da API: http://api.jquery.com/change/


Você pode vincular o evento 'input' à caixa de texto. Isso seria acionado sempre que a entrada fosse alterada, portanto, quando você colasse algo (mesmo com o botão direito), exclua e digite qualquer coisa.

$('#myTextbox').on('input', function() {
    // do something
});

Se você usar o manipulador de change , isso só será acionado depois que o usuário cancelar a seleção da caixa de entrada, o que pode não ser o que você deseja.

Há um exemplo de ambos aqui: http://jsfiddle.net/6bSX6/







keypress