2011-07-29 37 views
2

這個問題帶有一些背景。請參閱我最近發佈的其他兩個問題有關:谷歌瀏覽器,無限循環和選擇文本

How to select text in a textbox cross-browser
Infinite loops created in google chrome

提醒一句:它有可能是第二個鏈接是紅鯡魚。

好吧,所以我的問題是,我想這樣做,當用戶第一次點擊或標籤到文本框中,所有的文本應該被選中。如果文本框具有焦點,則對文本框內文本的後續點擊應該正常運行(即不會重新選擇所有文本)。我在上面第一個鏈接中選擇的答案是我在所有瀏覽器中找到的答案。代碼貼在下面爲您提供方便:

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

    event.stopPropagation(); 
    event.preventDefault(); 
    return false;  
}); 

現在我上面的第二個鏈接是什麼,我似乎在用這種方式運行。間歇性地看來,谷歌瀏覽器卡在某處,開始改變文本框之間的焦點非常快。你可以看到我認爲在這裏發生的事情:http://jsfiddle.net/ajbeaven/XppG9/14/

就像我說的,它似乎是一個間歇性問題,所以你可能不得不嘗試重新加載頁面幾次,以便看到我認爲可能導致改變焦點。請記住,它似乎只在鉻中發生。

感謝任何人可以擺脫一些光!

+0

看來chrome一次只能關注一個對象,因此每次發生事件時都會切換到對象。 – dpp

+0

在Chrome瀏覽器中的jsFiddle中很容易看到。我不知道它爲什麼這樣做。取下計時器會使問題消失,但選擇不會粘住。我會很樂意看到答案是什麼。 – jfriend00

回答

2

將任何額外的工作放在setTimeout函數中。並添加clearTimeout()之前setTimeout()

var focusTimeout = 0; 
$('input[type="text"]').live('focus', function(event) { 
    var inp = this; 
    clearTimeout(focusTimeout); 
    focusTimeout = setTimeout(function() { 
     $('#message-container').html($('#message-container').html() + "*\u200b"); 
     inp.select(); 
    }, 1); 
}); 

http://jsfiddle.net/XppG9/19/

在Chrome中,編寫HTML頁面是(apparantly),導致該領域失去焦點,並select()導致它後獲得焦點爲1ms ,從而觸發焦點事件並導致無限循環。將write html調用移動到選擇文本的函數中似乎有用。

+0

就是這樣,除了選擇文本框之外,我其實並沒有做任何事情。我的問題是,有時候chrome會陷入一系列文本框之間無盡的切換焦點循環中。它似乎只會發生,如果我快速做到這一點,就像點擊標籤一樣。 – ajbeaven

+0

@ajbeaven - 好的,在同一時間點擊並點擊,我可以看到你在說什麼。嘗試在調用setTimeout()之前添加一個'clearTimeout()'。 http://jsfiddle.net/XppG9/19/ – gilly3

-1

哦,我只是想通了。這個bug可能不會發生在你真實的網站上。發生這種情況是因爲您正在更新添加「*」到消息div的DOM。當你這樣做時,它會將頁面的內容向下推。這將頂部文本框移動到鼠標所在的位置,並在頂部文本框中觸發mouseup事件,從而導致兩個文本框觸發setTimeout並進入無限循環。報告此事的總計額。

編輯:它可能不是mouseup事件。看起來像鉻認爲你是合法的兩個重點。這裏是Chrome的缺陷測試用例:http://jsfiddle.net/delvarworld/AnBE8/

edit2:這也發生在Safari中。最有可能的webkit問題。

tldr簡單的解決方法是不更新,導致對焦點事件的迴流,在擺脫了HTML()行

的方式DOM您也可以嘗試:

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

它適用於我的Chrome

+0

如果用戶使用Tab鍵在文本框中導航,該怎麼辦?這不會工作。 – dpp

+0

通過文本框自動選擇內部的所有文本... –

+0

也不會允許您使用鼠標在域中移動插入點而不選擇所有文本或使用鼠標選擇部分文本。 – jfriend00