Tengo un form con dos cuadros de texto, uno seleccione menú desplegable y un botón de opción. Cuando se presiona la tecla , deseo llamar a una función de JavaScript (definida por el usuario), pero cuando la presiono, se envía el formulario.Introducir evento de pulsación de tecla en JavaScript
¿cómo puedo evitar la form se presenten cuando se pulsa ENTER el clave?
if(characterCode == 13)
{
return false; // returning false will prevent the event from bubbling up.
}
else
{
return true;
}
Ok, así que imagine que tiene el siguiente cuadro de texto en un formulario:
<input id="scriptBox" type="text" onkeypress="return runScript(event)" />
Con el fin de ejecutar algunos "definido por el usuario" script desde este cuadro de texto cuando se pulsa la tecla enter, y no haga que envíe el formulario, aquí hay un código de muestra . Tenga en cuenta que esta función no realiza ninguna comprobación de errores y lo más probable es que solo funcione en IE. Para hacer esto bien, necesita una solución más robusta, pero obtendrá la idea general.
function runScript(e) {
if (e.keyCode == 13) {
var tb = document.getElementById("scriptBox");
eval(tb.value);
return false;
}
}
devolver el valor de la función alertará al controlador de eventos a no burbujear el evento más lejos, y evitará que el evento de pulsación de tecla de ser manejado más.
eliminar la acción del onsubmit de la forma de ser una llamada a su función y añadir return false después de él, es decir:
<form onsubmit="javascript:myfunc();return false;" >
No puedo anular el envío ya que tengo otro formulario para enviar en esta página – Shyju
sí, puedes. Javascript es un lenguaje basado en prototipos. document.forms ["form_name"]. Onsubmit = fucntion() {} –
Tengo otro procedimiento de eliminación para ejecutar cuando se envía el formulario. Así que quiero mantener como está – Shyju
uso tanto event.which y event.keyCode:
function (event) {
if (event.which == 13 || event.keyCode == 13) {
//code to execute here
return false;
}
return true;
};
¿Por qué tanto event.which como event.keyCode? –
Algunos navegadores son compatibles con 'which' others compatible con' keyCode'. Es una buena práctica incluir ambos. – user568109
También use el evento 'keydown' en lugar de' keyup' o 'keypress' –
Si' re usando jQuery:
$('input[type=text]').on('keydown', function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
No pude hacer que esto funcione. El controlador se activa, pero 'preventDefault' no parece detener el envío del formulario, al menos en Chrome. –
Debe usar el evento de tecla en lugar de la tecla: '$ ('entrada [tipo = texto]'). On ('keydown', función (e) {if (e.which == 13) {e.preventDefault(); }}); ' –
keypress event also work –
A jQuery soluti en.
Vine aquí buscando una manera de retrasar el envío del formulario hasta que se haya disparado el evento de desenfoque en la entrada de texto.
$(selector).keyup(function(e){
/*
* Delay the enter key form submit till after the hidden
* input is updated.
*/
// No need to do anything if it's not the enter key
// Also only e.which is needed as this is the jQuery event object.
if (e.which !== 13) {
return;
}
// Prevent form submit
e.preventDefault();
// Trigger the blur event.
this.blur();
// Submit the form.
$(e.target).closest('form').submit();
});
sería bueno para obtener una versión más general que despidió a todos los eventos tardíos en lugar de sólo la forma presente.
Una manera mucho más simple y eficaz desde mi punto de vista debe ser:
function onPress_ENTER()
{
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
alert('enter pressed');
keyPressed=null;
}
else
{
return false;
}
}
Detectar tecla Intro presiona sobre el conjunto de documentos:
$(document).keypress(function (e) {
if (e.which == 13) {
alert('enter key is pressed');
}
});
Un reaccionar solución js
handleChange: function(e) {
if (e.key == 'Enter') {
console.log('test');
}
<div>
<Input type="text"
ref = "input"
placeholder="hiya"
onKeyPress={this.handleChange}
/>
</div>
El siguiente código agregará listener para la clave ENTER en toda la página.
Esto puede ser muy útil en pantallas con un solo botón de Acción por ejemplo Iniciar sesión, Register, etc. Enviar
<head>
<!--Import jQuery IMPORTANT -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--Listen to Enter key event-->
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13 || event.keyCode == 13) {
alert('enter key is pressed');
}
});
</script>
</head>
Probado en todos los navegadores.
document.onload = (() => {
alert('ok');
let keyListener = document.querySelector('#searchUser');
//
keyListener.addEventListener('keypress', (e) => {
if(e.keyCode === 13){
let username = e.target.value;
console.log(`username = ${username}`);
fetch(`https://api.github.com/users/${username}`,{
data: {
client_id: '08ecc2f68d922f188xxx',
client_secret: '5846d428b5340812b76c9637eceaee979340bxxx'
}
})
.then((user)=>{
console.log(`user = ${user}`);
});
fetch(`https://api.github.com/users/${username}/repos`,{
data: {
client_id: '08ecc2f68d922f18800e',
client_secret: '5846d428b5340812b76c9637eceaee979340b922'
}
})
.then((repos)=>{
console.log(`repos = ${repos}`);
for (let i = 0; i < repos.length; i++) {
console.log(`repos ${i} = ${repos[i]}`);
}
});
}else{
console.log(`e.keyCode = ${e.keyCode}`);
}
});
})();<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">¿Por qué se ha incluido client_id, etc. aquí? Es el código legítimo? – eddyparkinson
<div class="nav-search" id="nav-search">
<form class="form-search">
<span class="input-icon">
<input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
<i class="ace-icon fa fa-search nav-search-icon"></i>
</span>
<input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
</form>
</div>
<script type="text/javascript">
$("#search_value").on('keydown', function(e) {
if (e.which == 13) {
$("#search").trigger('click');
return false;
}
});
$("#search").on('click',function(){
alert('You press enter');
});
</script>
más reciente y mucho más limpia: event.key utilizar. ¡No más códigos de números arbitrarios!
const node = document.getElementsByClassName(".mySelect")[0];
node.addEventListener("keydown", function(event) {
if (event.key === "Enter") {
event.preventDefault();
// Do more work
}
});
¿Cómo una llamada a otro usuario define la función del Javascript? – Shyju
¿Qué quiere decir exactamente por usuario definido? Al igual, el usuario escribe algún script en un cuadro de texto y lo ejecuta usando Eval() ??? – Josh
¿Es esta una situación en la que se puede usar PreventDefualt? –