2011-07-27 59 views
6

一個文本框以下功能後我內部的所有文本跨瀏覽器的解決方案:在使用Javascript:用於選擇在聚焦

  • 用戶點擊或卡口插入
  • 在文本框中的所有文本中選擇一個文本框,除非文本框已經有了焦點,在這種情況下應該發生默認的點擊/選擇功能

這可能嗎?


這在Firefox 5

$('input[type="text"]').live('focus', function() { 
    this.select(); 
}); 

http://jsfiddle.net/HmQxZ/13/

Chrome和IE8選擇所有文字只在一剎那


這工作*在Chrome

$('input[type="text"]').live('click', function() { 
    this.select(); 
}); 

http://jsfiddle.net/HmQxZ/12/

Firefox和IE8選擇所有文本,但在隨後的單擊時,文本保持選中狀態。

*類型的作品,在文本框有焦點後,點擊它可以在選擇所有文本和能夠點擊閃爍的脫字符所在的位置之間交替。這可能是可以接受的。

+0

我還沒有測試過它,但編程方式選擇所有的文本,導致它滾動到字段的頂部/開始或底部/結尾,就像用戶通過按ctrl-A進行選擇一樣(顯然,假設有足夠的文本可以滾動,顯然)?如果是這樣,我會盡量避免在鼠標點擊事件時做到這一點,用戶可能試圖點擊他們想要開始輸入的點。 – nnnnnn

回答

9

採取setTimeout只是延緩它由一毫秒:

$('input[type="text"]').live('focus', function() { 
    var inp = this; 
    setTimeout(function() { 
     inp.select(); 
    }, 1); 
}); 

http://jsfiddle.net/HmQxZ/14/

發生了什麼事是一些其他的瀏覽器事件設置選擇你所後選擇了文字。因此,通過等待毫秒,您可以完成所有瀏覽器事件,然後選擇文本。現在什麼都不會撤銷。

+0

圖例。所有其他答案仍然具有與跨瀏覽器兼容性相同的問題。你知道其他事件會導致這種情況嗎? – ajbeaven

+0

@ajbeaven我想嘗試一個event.preventDefualt()它必須是你的事件被默認(沒有選擇任何東西)覆蓋:http://api.jquery.com/event.preventDefault/ –

+0

你的答案固定問題,像其他答案一樣,加入'preventDefault'和'return false'並沒有幫助。 – ajbeaven

0

您可能需要添加

event.preventDefault(); 
return false; 

你的函數(第一個)。這可能會修復其他瀏覽器。

此外,添加event到函數簽名:

$('input[type="text"]').live('focus', function (event) { 
+0

嘗試在Firefox或IE8中的文本框上單擊兩次。在文本框的任何位置選擇所有文本,然後再試圖將插入符號移動到文本中的某個位置。第二次點擊重新選擇所有文本並且不放置插入符號。 – ajbeaven

0

你要記得做一個return false; event.stopPropagation(); event.preventDefault()像這樣:

$('input[type="text"]').live('click', function (event) { 
    this.select(); 
    event.stopPropagation(); 
    event.preventDefault(); 
    return false; 
}); 

http://jsfiddle.net/7rYLV/

0

如果你可以使用jQuery,你做類似的事情;

$("#myInputField").focus(function(){ 
    // Select input field contents 
    this.select(); 
}); 

// Add this behavior to all text fields 
$("input[type=text]").focus(function(){ 
    // Select field contents 
    this.select(); 
}); 

HERE