javascript - ejemplos - poner el foco en un input html
¿Evento JQuery para que el usuario presione Entrar en un cuadro de texto? (7)
¿Hay algún evento en Jquery que se active solo si el usuario presiona el botón de ingresar en un cuadro de texto? ¿O cualquier plugin que se pueda agregar para incluir esto? Si no, ¿cómo escribiría un complemento rápido que haría esto?
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'')})
Cabe señalar que el uso de live() en jQuery ha quedado en desuso desde la versión 1.7 y se ha eliminado en jQuery 1.9 . En su lugar, se recomienda el uso de on() .
Yo sugeriría altamente la siguiente metodología para el enlace, ya que resuelve los siguientes desafíos potenciales:
- Al vincular el evento en
document.bodyy pasar $ selector como el segundo argumento aon(), los elementos se pueden adjuntar, separar, agregar o eliminar del DOM sin necesidad de tratar los eventos de reenlace o doble enlace. Esto se debe a que el evento se adjunta adocument.bodylugar de$selectordirectamente, lo que significa que$selectorse puede agregar, eliminar y agregar de nuevo y nunca cargará el evento vinculado a él. - Al
off()antes deoff(), 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 accidental. - Al ajustar el script dentro de
$(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 activa para las solicitudes AJAX, mientras que$(function() {...})hace.
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>
Heres un plugin 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, incluye el código y configúralo así:
$( function () {
console.log($("input"));
$("input").onEnter( function() {
$(this).val("Enter key pressed");
});
});
Otra variación sutil. Fui por una ligera separación de poderes, así que tengo un plugin para habilitar la captura de la tecla de entrada, luego simplemente me vinculo 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 a elementos que aún no ha creado).
$(''body'').catchEnter(''.onelineInput'').on(''enterkey'',function(ev) { /*process input */ });
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");
}
});
Código HTML:-
<input type="text" name="txt1" id="txt1" onkeypress="return AddKeyPress(event);" />
<input type="button" id="btnclick">
Código de Script de 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;
}
Su formulario no tiene botón de envío predeterminado
$(''#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");
}
});