如何在文本框獲取焦點時取消選擇文本，當選項卡被按下時？

Question

我有一連串的文本框，用於輸入時間。當用戶回到已編輯的文本框時，瀏覽器會突出顯示該文本框中的文本。

1. 我怎麼會取消選擇它的文本時，文本框獲得焦點，並
2. 將光標移動到文本框中的文本的開始？

我曾嘗試以下方法，但在沒有更好的：

在textboxfocushandler：

var html = $("#MyTextArea").val(); 
$("#MyTextArea").focus().val("").val(html); 

的文本框選擇處理程序：

if (window.getSelection) { 
    if (window.getSelection().empty) { // Chrome 
     window.getSelection().empty(); 
    } else if (window.getSelection().removeAllRanges) { // Firefox 
     window.getSelection().removeAllRanges(); 
    } 
} else if (document.selection && document.selection.empty) { // IE? 
    document.selection.empty(); 
} 

Answer 1

我認爲問題是，瀏覽器在焦點處理程序執行之後纔會選擇文本。你可以嘗試使用setTimeout()耽誤您的代碼，如：

$('input').focus(function() { 
    var $input = $(this); 
    setTimeout(function() { 
     setCaretPos($input[0], 0, 0); 
    }, 0) 
}); 

jsfiddle demo

這使用以下方法來設置插入符位置。

function setCaretPos(element, begin, end) { 
    if (element.setSelectionRange) { 
     element.setSelectionRange(begin, end); 
    } else if (element.createTextRange) { 
     var range = element.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', end); 
     range.moveStart('character', begin); 
     range.select(); 
    } 
} 

如果你決定要在文本結尾的焦點，你可以使用：

var end = $input.val().length; 
setCaretPos($input[0], end, end); 

信用：

我得到了代碼從jQuery mask plugin的setCaretPos()功能。該插件包含一個.caret()插件方法，您可以使用它。