anzeigen searchbar und konzentrieren es nach keypress

Question

Ich möchte ein searchbar zeigen, wenn der Benutzer die „R“ Taste drückt, sollte die searchbar auch nach dem Tastendruck fokussiert werden, hier ist die Geige:

buttonKeyAllowed = true; 
 

 
function disparitionMenu() 
 
/* this function is used to show the searchbar */ 
 
{ 
 
    var input = jQuery("#mod-search-searchword"); 
 
    input[0].selectionStart = input[0].selectionEnd = input.val().length; 
 
    jQuery("#menu-search").css("display", "inline-block"); 
 
} 
 
    
 
/*-- key events --*/ 
 

 

 
jQuery(document).keyup(function() { 
 
    buttonKeyAllowed = true; 
 
}); 
 

 

 
jQuery(document).focus(function(e) { 
 
    buttonKeyAllowed = true; 
 
}); 
 

 

 
jQuery(document).keypress(function(e) { \t \t 
 
     
 
    if (e.repeat != undefined) { 
 
    buttonKeyAllowed = !e.repeat; 
 
    } 
 
    if (!buttonKeyAllowed) 
 
    return; 
 
    buttonKeyAllowed = false; 
 

 

 
    var code = (e.keyCode || e.which); 
 

 
    if(code == 114) { 
 
    disparitionMenu(); 
 
    } 
 
});

#menu-search 
 
{ 
 
    display: none; 
 
} 
 

 
input{ 
 
    width: 100px; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
    <div id="megamenu"> 
 
    <div id="menu-search"> 
 
     <input type="text" id="mod-search-searchword" /> 
 
    </div> 
 
    </div>

Dieser Code funktioniert gut, aber es gibt ein Problem:

Wenn der Benutzer drückt die Taste „R“ ein wenig zu lang, ‚r‘ in der Suchleiste geschrieben ist, und ich möchte es zu vermeiden.

Was ist der sauberste Weg, um dieses Problem zu beheben? Ich möchte keine while(/* is R key down*/){} Schleife vor der Funktion hinzufügen disparitionMenu()

Vielen Dank für Ihre Hilfe.

Answer 1

Fügen Sie input.focus(); zu Ihrem function disparitionMenu() hinzu. Überprüfen Sie den folgenden Code.

buttonKeyAllowed = true; 
 

 
var isVisible = false; 
 

 
function disparitionMenu() 
 
    /* this function is used to show the searchbar */ 
 
    { 
 
    var input = jQuery("#mod-search-searchword"); 
 
    input[0].selectionStart = input[0].selectionEnd = input.val().length; 
 
    jQuery("#menu-search").css("display", "inline-block"); 
 
    input.focus(); 
 
    } 
 

 
/*-- key events --*/ 
 

 

 
jQuery(document).keyup(function() { 
 
    buttonKeyAllowed = true; 
 
}); 
 

 
jQuery(document).focus(function(e) { 
 
    buttonKeyAllowed = true; 
 
}); 
 

 
jQuery(document).keypress(function(e) { 
 

 
    if (e.repeat != undefined) { 
 
    buttonKeyAllowed = !e.repeat; 
 
    } 
 
    if (!buttonKeyAllowed) 
 
    return; 
 
    buttonKeyAllowed = false; 
 

 

 
    var code = (e.keyCode || e.which); 
 

 
    if (code == 114) { 
 
    if (!isVisible) { 
 
     isVisible = true; 
 
     e.preventDefault(); 
 
    } 
 
    disparitionMenu(); 
 
    } 
 
});

#menu-search { 
 
    display: none; 
 
} 
 
input { 
 
    width: 100px; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 

 
<div id="megamenu"> 
 
    <div id="menu-search"> 
 
    <input type="text" id="mod-search-searchword" /> 
 
    </div> 
 
</div>

Answer 2

Ihre Eingabe Setzen Sie nur lesbar mit

<input type="text" id="mod-search-searchword" readonly="true" /> 

auf Ereignis onkeyup wenn r Nur-Lese falsch gesetzt ist oder entfernen.

jQuery(document).keyup(function(e) {   
    var code = (e.keyCode || e.which);  
    if(code == 82) { 
    $('#mod-search-searchword').removeAttr('readonly'); 
    } 
}); 

entfernen auch das Ereignis :)^