Comment capturer la touche enter press de?
dans ma page HTML, j'avais une boîte de texte pour que l'utilisateur entre des mots-clés pour la recherche. Lorsqu'ils cliquent sur le bouton de recherche, la fonction JavaScript génère une URL et s'exécute dans une nouvelle fenêtre.
la fonction JavaScript fonctionne correctement lorsque l'utilisateur clique sur le bouton de recherche à la souris, mais il n'y a pas de réponse lorsque l'utilisateur appuie sur la touche Entrée.
function searching() {
var keywordsStr = document.getElementById('keywords').value;
var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
window.location = cmd;
}
<form name="form1" method="get">
<input name="keywords" type="text" id="keywords" size="50" >
<input type="submit" name="btn_search" id="btn_search" value="Search"
onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
<input type="reset" name="btn_reset" id="btn_reset" value="Reset">
</form>
12 réponses
approche de Forme
comme le dit scoota269, vous devez utiliser onSubmit au lieu de cela, parce que presser enter sur une boîte de texte va très probablement déclencher un formulaire soumettre (si à l'intérieur d'un formulaire)
<form action="#" onsubmit="handle">
<input type="text" name="txt" />
</form>
<script>
function handle(e){
e.preventDefault(); // Otherwise the form will be submitted
alert("FORM WAS SUBMITTED");
}
</script>
Textbox approche
Si vous souhaitez disposer d'un événement à l'entrée-champ, alors vous devez vous assurer que votre handle() retournera false, sinon le formulaire sera envoyé.
<form action="#">
<input type="text" name="txt" onkeypress="handle(event)" />
</form>
<script>
function handle(e){
if(e.keyCode === 13){
e.preventDefault(); // Ensure it is only this code that rusn
alert("Enter was pressed was presses");
}
}
</script>
Utiliser onkeypress . Vérifiez si la touche pressée est entrée (keyCode = 13). si oui, appelez le searching() fonction.
HTML
<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleKeyPress(event)">
JAVASCRIPT
function handleKeyPress(e){
var key=e.keyCode || e.which;
if (key==13){
searching();
}
}
mise à jour: Correction de la typographie dans le code qui a probablement causé des plaintes antérieures au sujet de son travail.
Violon lien après avoir vu le commentaire
Essayez ceci....
HTML inline
onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"
JavaScript
<script>
function fnsearch()
{
alert('you press enter');
}
</script>
Vous pouvez utiliser javascript
ctl.attachEvent('onkeydown', function(event) {
try {
if (event.keyCode == 13) {
FieldValueChanged(ctl.id, ctl.value);
}
false;
} catch (e) { };
return true
})
petit morceau de jQuery générique pour vous..
$('div.search-box input[type=text]').on('keydown', function (e) {
if (e.which == 13) {
$(this).parent().find('input[type=submit]').trigger('click');
return false;
}
});
cela fonctionne sur l'hypothèse que la boîte de texte et le bouton Soumettre sont enveloppés sur le même div. fonctionne un treat avec plusieurs boîtes de recherche sur une page
utilisez un attribut onsubmit sur la balise du formulaire plutôt que onclick sur le fichier submit.
// jquery press check by Abdelhamed Mohamed
$(document).ready(function(){
$("textarea").keydown(function(event){
if (event.keyCode == 13) {
// do something here
alert("You Pres Enter");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea></textarea> vous devez créer un handler pour le onkeypress action.
HTML
<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />
JS
function handleEnter(inField, e)
{
var charCode;
//Get key code (support for all browsers)
if(e && e.which)
{
charCode = e.which;
}
else if(window.event)
{
e = window.event;
charCode = e.keyCode;
}
if(charCode == 13)
{
//Call your submit function
}
}
<form action="#">
<input type="text" id="txtBox" name="txt" onkeypress="handle" />
</form>
<script>
$("#txtBox").keypress(function (e) {
if (e.keyCode === 13) {
alert("Enter was pressed was presses");
}
return false;
});
</script>
Facile que de lécher une glace, laisse supposer:
votre page avant:
<body>
de votre page:
<body onkeypress=if(event.keyCode==13)alert('hi')>
ceci est un exemple aussi simple que l'est; je suppose que vous avez votre page avec une étiquette de corps simple et si vous insérez cette fonction onkeypress qui fonctionne par elle-même, cela signifie que chaque fois que vous appuyez sur la touche ENTER l'alerte apparaîtra [utilisez n'importe quoi après .keyCode= = 13)]
Utiliser event.key au lieu de event.keyCode!
function onEvent(event) {
if (event.key === "Enter") {
// Submit form
}
};
Deprecated selon MDN
cette fonctionnalité a été retirée des standards Web. Bien que certains navigateurs puissent encore le supporter, il est en train d'être abandonné. Évitez de l'utiliser et mettez à jour le code existant si possible; consultez le tableau de compatibilité au bas de cette page pour guider votre décision. Notez que cette fonction peut cesser de fonctionner à tout moment.
cependant, si vous voulez vraiment utiliser ceci et avez besoin d'une valeur, allez http://keycode.info/