Existe algum evento no Jquery que é acionado apenas se o usuário pressionar o botão Enter em uma caixa de texto? Ou qualquer plugin que possa ser adicionado para incluir isso? Caso contrário, como eu escreveria um plugin rápido que faria isso?
Existe algum evento no Jquery que é acionado apenas se o usuário pressionar o botão Enter em uma caixa de texto? Ou qualquer plugin que possa ser adicionado para incluir isso? Caso contrário, como eu escreveria um plugin rápido que faria isso?
Respostas:
Você pode conectar seu próprio evento personalizado
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
e.keyCodepara algumas chaves, melhor usar e.which, isso garantirá que você manipulará o mesmo botão em todos os navegadores
$('#textbox').on('keypress', function (e) {
if(e.which === 13){
//Disable textbox to prevent multiple submit
$(this).attr("disabled", "disabled");
//Do Stuff, submit, etc..
//Enable the textbox again if needed.
$(this).removeAttr("disabled");
}
});
Aqui está um plugin para você: (Fiddle: http://jsfiddle.net/maniator/CjrJ7/ )
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
//use it:
$('textarea').pressEnter(function(){alert('here')})
$variável para o plug-in não é uma boa ideia, pois pode causar conflitos.
$("#myInput").bind('click, onEnter', myCallback);e funcionaria sem precisar de mais nada?
aqui está um plugin jquery para fazer isso
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);Para usá-lo, inclua o código e configure-o assim:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), dessa forma, dentro da função de retorno de chamada que você pode usar thisnormalmente para acessar o elemento no qual o evento foi acionado.
e.preventDefault(); e.stopPropagation();dentro do if (e.keyCode)bit.
Deve-se notar que o uso live()no jQuery foi descontinuado desde a versão 1.7e foi removido no jQuery 1.9. Em vez disso, o uso de on()é recomendado.
Eu sugeriria altamente a seguinte metodologia para ligação, pois resolve os seguintes desafios em potencial:
document.bodye passar o seletor $ como o segundo argumento para on(), os elementos podem ser anexados, desanexados, adicionados ou removidos do DOM sem precisar lidar com eventos de ligação ou ligação dupla. Isso ocorre porque o evento é anexado ao document.bodyinvés de $selectordiretamente, o que significa que $selectorpode ser adicionado, removido e adicionado novamente e nunca carregará o evento associado a ele.off()antes on(), esse script pode residir no corpo principal da página ou no corpo de uma chamada AJAX, sem ter que se preocupar com eventos de ligação dupla acidental.$(function() {...}), ele pode ser carregado novamente pelo corpo principal da página ou pelo corpo de uma chamada AJAX. $(document).ready()não é acionado por solicitações AJAX, enquanto o $(function() {...})é.Aqui está um exemplo:
<!DOCTYPE html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $selector = $('textarea');
// Prevent double-binding
// (only a potential issue if script is loaded through AJAX)
$(document.body).off('keyup', $selector);
// Bind to keyup events on the $selector.
$(document.body).on('keyup', $selector, function(event) {
if(event.keyCode == 13) { // 13 = Enter Key
alert('enter key pressed.');
}
});
});
</script>
</head>
<body>
</body>
</html>Se sua entrada for search, você também pode usar on 'search'event. Exemplo
<input type="search" placeholder="Search" id="searchTextBox">.
$("#searchPostTextBox").on('search', function () {
alert("search value: "+$(this).val());
});Código HTML:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">Código de script Java
function AddKeyPress(e) {
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13) {
document.getElementById('btnEmail').click();
return false;
}
return true;
}Seu formulário não possui o botão Enviar padrão
Outra variação sutil. Fui para uma ligeira separação de poderes, por isso tenho um plug-in para permitir a captura da tecla enter, depois vinculo-me aos eventos normalmente:
(function($) { $.fn.catchEnter = function(sel) {
return this.each(function() {
$(this).on('keyup',sel,function(e){
if(e.keyCode == 13)
$(this).trigger("enterkey");
})
});
};
})(jQuery);E então em uso:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Essa variação permite usar a delegação de eventos (para vincular a elementos que você ainda não criou).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });Não consegui keypressdisparar o evento para o botão enter e coçou a cabeça por algum tempo até ler os documentos do jQuery:
" O evento de pressionamento de tecla é enviado a um elemento quando o navegador registra a entrada do teclado. Isso é semelhante ao evento de pressionamento de tecla, exceto que as teclas modificadoras e que não imprimem, como Shift, Esc e excluem eventos de pressionamento de tecla, mas não os eventos de pressionamento de tecla. " ( https://api.jquery.com/keypress/ )
Eu tive que usar o evento keyupou keydownpara pressionar o botão Enter.