將輸入字段設置為開始輸入

Question

我正在尋找一種無需選擇任何內容即可開始在網站上輸入內容，然后將特定的輸入字段作為焦點的方法。

Google也使用此功能。 在他們的搜索結果中，您可以單擊任意位置（使搜索字段散焦），並且在您開始鍵入內容時，它將自動再次聚焦在搜索字段上。

我正在考慮將jQuery的一般onkeyup函數專注於該領域，有什么建議嗎？

非常感激。

Answer 1

您應該綁定keydown事件，但應立即取消綁定該事件，以便可以在其他文本輸入中繼續輸入而不必將焦點恢復為默認輸入。

$(document).bind('keydown',function(e){
    $('#defaultInput').focus();
    $(document).unbind('keydown');
});

請參閱此處的示例。

Answer 2

此解決方案不存在@mVChr解決方案所具有的問題：即，您可以使用鼠標單擊另一個輸入並開始鍵入，而不會由於keydown -binding而失去焦點。

同樣，此解決方案不會刪除所有元素的keydown -bindings，而是使用命名處理程序。

var default_input_handler = function() {
    $('.default-input').focus();
    $(document).off('keydown', default_input_handler);
}

$(document).on('keydown', default_input_handler);

$('input, textarea, select').on('focus', function() {
    $(document).off('keydown', default_input_handler);
});

Answer 3

如果打算這樣做，我會說使用onKeyUp而不是onKeyDown。 它的動作要早得多，這將有助於簡化交互流程。

Answer 4

答案很簡單：

$(document).keydown(function() { $('#element').focus(); });

畢竟首選keydown，因為只有在按下第一個鍵之后才會觸發keyup，並且不會捕獲在我的搜索字段中鍵入的第一個鍵。