¿Hay algún evento en Jquery que se active solo si el usuario presiona el botón Intro en un cuadro de texto? ¿O algún complemento que se pueda agregar para incluir esto? Si no, ¿cómo escribiría un complemento rápido que hiciera esto?
¿Hay algún evento en Jquery que se active solo si el usuario presiona el botón Intro en un cuadro de texto? ¿O algún complemento que se pueda agregar para incluir esto? Si no, ¿cómo escribiría un complemento rápido que hiciera esto?
Respuestas:
Puedes conectar tu propio evento personalizado
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});e.keyCodeteclas, mejor uso e.which, esto garantizará que maneje el mismo botón en cada navegador
$('#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");
}
});Aquí hay un complemento para usted: (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')})$variable para el complemento no es una buena idea ya que puede causar conflictos.
$("#myInput").bind('click, onEnter', myCallback);y funcione sin necesidad de nada más?
heres un complemento jquery para hacer eso
(function($) {
$.fn.onEnter = function(func) {
this.bind('keypress', function(e) {
if (e.keyCode == 13) func.apply(this, [e]);
});
return this;
};
})(jQuery);para usarlo, incluya el código y configúrelo así:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});func.apply(this), de esa manera dentro de la función de devolución de llamada que puede usar thisnormalmente para acceder al elemento en el que se activó el evento.
e.preventDefault(); e.stopPropagation();dentro del if (e.keyCode)bit.
Cabe señalar que el uso de live()en jQuery ha quedado en desuso desde la versión 1.7y se ha eliminado en jQuery 1.9. En cambio, on()se recomienda el uso de .
Sugeriría encarecidamente la siguiente metodología para la unión, ya que resuelve los siguientes desafíos potenciales:
document.bodyy pasar $ selector como el segundo argumento para on(), los elementos se pueden adjuntar, separar, agregar o eliminar del DOM sin necesidad de lidiar con eventos de re-enlace o doble enlace. Esto se debe a que el evento se adjunta en document.bodylugar de hacerlo $selectordirectamente, lo que significa que $selectorse puede agregar, eliminar y agregar nuevamente y nunca cargará el evento vinculado a él.off()antes on(), este script puede vivir dentro del cuerpo principal de la página o dentro del cuerpo de una llamada AJAX, sin tener que preocuparse por eventos de doble enlace accidentalmente.$(function() {...}), este script puede ser cargado nuevamente por el cuerpo principal de la página o dentro del cuerpo de una llamada AJAX. $(document).ready()no se dispara por solicitudes AJAX, mientras que $(function() {...})sí.Aquí hay un ejemplo:
<!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>Si su entrada es search, también puede usar on 'search'evento. Ejemplo
<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">Java Script Code
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;
}Su formulario no tiene el botón Enviar predeterminado
Otra variación sutil. Fui por una ligera separación de poderes, por lo que tengo un complemento para permitir la captura de la tecla Intro, luego simplemente me conecto a los 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);Y luego en uso:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });Esta variación le permite usar la delegación de eventos (para enlazar elementos que aún no ha creado).
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });No pude hacer que el keypressevento se activara con el botón enter, y me rasqué la cabeza por un tiempo, hasta que leí los documentos de jQuery:
" El evento de pulsación de tecla se envía a un elemento cuando el navegador registra la entrada del teclado. Esto es similar al evento de pulsación de tecla, excepto que el modificador y las teclas que no se imprimen como Shift, Esc y eliminan eventos de pulsación de tecla de activación pero no eventos de pulsación de tecla " . https://api.jquery.com/keypress/ )
Tuve que usar el evento keyupo keydownpara presionar el botón enter.