¿Hay algún evento en Jquery que se active solo si el usuario pulsa el botón Entrar en un cuadro de texto? ¿O cualquier complemento que pueda agregarse para incluir esto? Si no, ¿cómo escribiría un complemento rápido que haría esto?Evento JQuery para usuario presionando Entrar en un cuadro de texto?
Puede conectar su propio evento personalizado
$('textarea').bind("enterKey",function(e){
//do stuff here
});
$('textarea').keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterKey");
}
});
Aquí es un plugin para usted: (violín: 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')})
Agradable. Mucho más simple que esa URL que publiqué. Me pregunto qué diablos es el artículo que publiqué y por qué se necesita tanto código ... – CaptSaltyJack
Demasiado tarde, ya he escrito el mío: P. También realiza el mismo trabajo en menos líneas ... además, usar la variable '$' para el complemento no es una buena idea, ya que puede causar conflictos. –
@ClickUpvote, envolverlo en un cierre debería arreglar ese – Neal
aquí hay un plugin de 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, incluyen el código y lo puso de esta manera:
$(function() {
console.log($("input"));
$("input").onEnter(function() {
$(this).val("Enter key pressed");
});
});
Bueno, yo llamaría a la devolución de llamada usando 'func.apply (this)', de esa manera dentro de la función de devolución de llamada puede usar 'this' como normal para acceder al elemento sobre el cual se desencadenó el evento. –
sí, un buen punto acerca de func.apply (esto), ni siquiera lo había considerado. – jzilla
Agradable y conciso, pero añadiría que detener la propagación y los valores predeterminados sería una buena idea en la mayoría de los casos, para evitar el envío de formularios. Simplemente agregue '' 'e.preventDefault(); e.stopPropagation(); '' 'dentro del' '' if (e.keyCode) '' 'bit. –
$('#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");
}
});
Gracias - Esta solución se ajustaba a mi caso de uso. Sin embargo, vale la pena señalar que una vez que se realiza cualquier procesamiento, es posible que desee agregar '$ (this) .removeAttr (" disabled ");' para volver a habilitar el cuadro de texto. – misterjaytee
Cabe bien señaló que el uso de live() en jQuery ha sido obsoleta a desde la versión 1.7 y ha sido eliminado en jQuery 1.9. En su lugar, se recomienda el uso de on().
Yo sugeriría que la siguiente metodología para la unión, como los que resuelve los siguientes problemas potenciales:
document.body y pasando selector de $ como segundo argumento a on(), los elementos pueden ser unidos, separado, agregado o eliminado del DOM sin la necesidad de tratar con eventos vinculantes o de doble enlace. Esto se debe a que el evento se adjunta al document.body en lugar de $selector directamente, lo que significa $selector se puede agregar, eliminar y agregar nuevamente y nunca cargará el evento vinculado a él.off() antes de 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 accidentalmente por eventos de doble enlace.$(function() {...}), este script puede volver a cargarse ya sea por el cuerpo principal de la página o dentro del cuerpo de una llamada AJAX. $(document).ready() no se activa para solicitudes AJAX, mientras que $(function() {...}) sí.Aquí es 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>
Eso debería ser event.keyCode == 13 – jasonmcclurg
true y fixed. –
Otra variación sutil. Fui a una ligera separación de poderes, así que tengo un plugin para permitir la captura de la tecla enter, entonces sólo se unen a 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 entonces en uso:
$('.input[type="text"]').catchEnter().on('enterkey',function(ev) { });
Este la variación le permite usar la delegación de eventos (para enlazar a elementos que aún no ha creado). Código
$('body').catchEnter('.onelineInput').on('enterkey',function(ev) { /*process input */ });
HTML: -
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Código Java Script
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 disponen por defecto botón Enviar
Vale la pena señalar que en un escenario de entrar en la detección para evitar fo El envío de rm, el evento "keyup" no es óptimo porque el formulario detecta el envío en el keydown. Por lo tanto, "keydown" o "keypress" podrían ser mejores en ese caso. – TechNyquist
Nota, bind() está en desuso en jQuery 3.0. –