Quero detectar sempre que o conteúdo de uma caixa de texto for alterado. Posso usar o método keyup, mas isso também detectará pressionamentos de teclas que não geram letras, como as teclas de seta. Pensei em dois métodos de fazer isso usando o evento keyup:
- Verifique explicitamente se o código ascii da tecla pressionada é uma letra \ backspace \ delete
- Use fechamentos para lembrar qual era o texto na caixa de texto antes do pressionamento de tecla e verifique se isso foi alterado.
Ambos parecem meio complicados.
javascript
jquery
textbox
keypress
olamundo
fonte
fonte
.keyup()
event ... mais informações aqui: stackoverflow.com/questions/3003879/….change()
se ele foi alterado.Respostas:
Comece a observar o evento 'input' em vez de 'change'.
... que é agradável e limpo, mas pode ser estendido para:
fonte
Use o evento onchange em HTML / JavaScript padrão.
No jQuery, esse é o evento change () . Por exemplo:
$('element').change(function() { // do something } );
EDITAR
Depois de ler alguns comentários, o que dizer de:
fonte
O evento 'change' não funciona corretamente, mas a 'entrada' é perfeita.
fonte
.on
seja recomendado a partir de 1.7 (e não.bind
).Que tal agora:
<jQuery 1.7
> jQuery 1.7
Isso funciona no IE8 / IE9, FF, Chrome
fonte
console.log
o valor do campo, ele registrará duas vezes sempre que você digitar um caractere.Sim. Você não precisa usar fechamentos necessariamente, mas precisará lembrar o valor antigo e compará-lo com o novo.
Contudo! Isso ainda não pega todas as alterações, porque existem maneiras de editar o conteúdo da caixa de texto que não envolve nenhum pressionamento de tecla. Por exemplo, selecionando um intervalo de texto e clique com o botão direito do mouse em recortar. Ou arrastando-o. Ou soltar texto de outro aplicativo na caixa de texto. Ou alterando uma palavra através da verificação ortográfica do navegador. Ou...
Portanto, se você deve detectar todas as alterações, é necessário fazer uma pesquisa. Você pode
window.setInterval
verificar o campo em relação ao seu valor anterior a cada (digamos) segundo. Também poderia ligaronkeyup
à mesma função para que as alterações que são causadas por teclas pressionadas são reflectidos mais rápido.Pesado? Sim. Mas é isso ou apenas faça isso da maneira normal de troca de HTML e não tente atualizar instantaneamente.
fonte
input
evento HTML5 é viável e funciona nas versões atuais de todos os principais navegadores.Você pode usar o evento 'input' para detectar a alteração do conteúdo na caixa de texto. Não use 'live' para vincular o evento, pois ele está obsoleto no Jquery-1.7; portanto, use 'on'.
fonte
Suponho que você esteja procurando fazer algo interativo quando a caixa de texto for alterada (por exemplo, recuperar alguns dados via ajax). Eu estava procurando essa mesma funcionalidade. Sei que usar uma solução global não é a solução mais robusta ou elegante, mas foi com isso que fui. Aqui está um exemplo:
Uma coisa importante a ser observada aqui é que estou usando setTimeout e não setInterval, pois não quero enviar várias solicitações ao mesmo tempo. Isso garante que o cronômetro "pare" quando o formulário for enviado e "inicie" quando a solicitação for concluída. Eu faço isso chamando checkSearchChanged quando minha chamada ajax é concluída. Obviamente, você pode expandir isso para verificar o comprimento mínimo, etc.
No meu caso, estou usando o ASP.Net MVC para que você possa ver como vincular isso ao MVC Ajax, também na seguinte postagem:
http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx
fonte
Eu recomendaria dar uma olhada no widget de preenchimento automático da UI do jQuery. Eles lidaram com a maioria dos casos lá, já que sua base de código é mais madura do que a maioria dos outros por aí.
Abaixo está um link para uma página de demonstração para que você possa verificar se funciona. http://jqueryui.com/demos/autocomplete/#default
Você obterá o maior benefício ao ler a fonte e ver como eles a resolveram. Você pode encontrá-lo aqui: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .
Basicamente, eles fazem tudo, se vinculam
input, keydown, keyup, keypress, focus and blur
. Então eles têm um tratamento especial para todos os tipos de chaves, comopage up, page down, up arrow key and down arrow key
. Um cronômetro é usado antes de obter o conteúdo da caixa de texto. Quando um usuário digita uma chave que não corresponde a um comando (tecla para cima, tecla para baixo e assim por diante), existe um timer que explora o conteúdo após cerca de 300 milissegundos. Parece com isso no código:O motivo para usar um timer é para que a interface do usuário tenha a chance de ser atualizada. Quando o Javascript está em execução, a interface do usuário não pode ser atualizada; portanto, a chamada para a função de atraso. Isso funciona bem para outras situações, como manter o foco na caixa de texto (usada por esse código).
Portanto, você pode usar o widget ou copiar o código em seu próprio widget se não estiver usando a interface do usuário do jQuery (ou, no meu caso, desenvolvendo um widget personalizado).
fonte
Gostaria de perguntar por que você está tentando detectar quando o conteúdo da caixa de texto mudou em tempo real ?
Uma alternativa seria definir um cronômetro (via setIntval?) E comparar o último valor salvo com o atual e, em seguida, redefinir um cronômetro. Isso garantiria capturar QUALQUER alteração, seja causada por chaves, mouse, algum outro dispositivo de entrada que você não considerasse, ou até mesmo JavaScript, alterando o valor (outra possibilidade que ninguém mencionou) de uma parte diferente do aplicativo.
fonte
você considera usar o evento de mudança ?
fonte
Use o
textchange
evento através do shimmer personalizado do jQuery parainput
compatibilidade entre navegadores . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (github bifurcado mais recentemente: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )Isso lida com todas as tags de entrada
<textarea>content</textarea>
, inclusive , que nem sempre funciona comchange
keyup
etc. (!) Apenas o jQueryon("input propertychange")
manipula as<textarea>
tags de forma consistente, e o acima é um calço para todos os navegadores que não entendem oinput
evento.Teste JS Bin
Isso também lida com colar, excluir e não duplica o esforço na digitação.
Se não estiver usando um calço, use
on("input propertychange")
eventos jQuery .fonte
Há um exemplo completo de trabalho aqui .
fonte
Algo assim deve funcionar, principalmente porque
focus
efocusout
acabaria com dois valores separados. Estou usandodata
aqui porque ele armazena valores no elemento, mas não toca no DOM. Também é uma maneira fácil de armazenar o valor conectado ao seu elemento. Você poderia facilmente usar uma variável de escopo mais alto.fonte
Este Código detecta sempre que o conteúdo de uma caixa de texto é alterado pelo usuário e modificado pelo código Javascript.
fonte