使用jQuery在焦點上選擇文本在Safari和Chrome中不工作

Question

我有以下jQuery代碼（類似於this question），適用於Firefox和IE，但在Chrome和Safari中失敗（沒有錯誤，只是不起作用）。任何解決方法的想法？

$("#souper_fancy").focus(function() { $(this).select() }); 

Answer 1

這是導致該選擇機會，獲得未選擇的onmouseup事件，所以你只需要添加：

$("#souper_fancy").mouseup(function(e){ 
    e.preventDefault(); 
}); 

Answer 2

這適用於input type =「text」元素。 #souper_fancy是什麼樣的元素？

$("#souper_fancy").focus(function() { 
    $(this).select(); 
}); 

Answer 3

$('#randomfield').focus(function(event) { 
    setTimeout(function() {$('#randomfield').select();}, 0); 
}); 

Answer 4

儘管這適用於在IE，火狐，Chrome選擇它， Safari和Opera，它不會讓您通過在Firefox，Chrome和Safari中再次單擊進行編輯。不完全確定，但我認爲這可能是由於這3個瀏覽器重新發出焦點事件，即使該字段已經有焦點，因此從不允許您實際插入光標（因爲您再次選擇它），而在IE和Opera它似乎沒有這樣做，所以聚焦事件不會再次被觸發，從而光標被插入。

我發現了一個更好的修補程序in this Stack post，它沒有這個問題，可以在所有瀏覽器中使用。

Answer 5

這也應該工作，鉻：在鼠標鬆開

$("#souper_fancy").focus(function() { 
    var tempSouper = $(this); 
    setTimeout(function(){ 
     tempSouper.select(); 
    },100); 
}); 

Answer 6

只是防止默認使文本選擇在任何時候都可以打開。 MOUSEUP事件負責清除文本選擇。但是，通過阻止其默認行爲，您無法使用鼠標取消選擇文本。

爲了避免這種情況，讓文本選擇再次運行，您可以在FOCUS上設置一個標誌，從MOUSEUP中讀取它並重置它，以便將來的MOUSEUP事件按預期工作。

$("#souper_fancy").focus(function() { 
    $(this).select(); 

    //set flag for preventing MOUSEUP event.... 
    $this.data("preventMouseUp", true); 
}); 

$("#souper_fancy").mouseup(function(e) { 
    var preventEvent = $this.data("preventMouseUp"); 

    //only prevent default if the flag is TRUE 
    if (preventEvent) { 
     e.preventDefault(); 
    } 

    //reset flag so MOUSEUP event deselect the text 
    $this.data("preventMouseUp", false); 
}); 

Answer 7

因爲使用setTimeout時閃爍，所以還有另一種基於事件的解決方案。 這樣'焦點'事件附加'mouseup'事件和事件處理程序再次分離自己。

function selectAllOnFocus(e) { 
    if (e.type == "mouseup") { // Prevent default and detach the handler 
     console.debug("Mouse is up. Preventing default."); 
     e.preventDefault(); 
     $(e.target).off('mouseup', selectAllOnFocus); 
     return; 
    } 
    $(e.target).select(); 
    console.debug("Selecting all text"); 
    $(e.target).on('mouseup', selectAllOnFocus); 
} 

再用線的第一個事件

$('.varquantity').on('focus', selectAllOnFocus); 

Answer 8

使用setSelectionRange()回調的內部requestAnimationFrame()：

$(document).on('focus', '._selectTextOnFocus', (e) => { 
    var input = e.currentTarget; 
    var initialType = e.currentTarget.type; 

    requestAnimationFrame(() => { 
     // input.select() is not supported on iOS 
     // If setSelectionRange is use on a number input in Chrome it throws an exception, 
     // so here we switch to type text first. 
     input.type = "text"; 
     input.setSelectionRange(0, Number.MAX_SAFE_INTEGER || 9999); 
     input.type = initialType; 
    }); 
}); 

使用setSelectionRange()，而不是因爲select()select()不會在移動Safari中工作（見Programmatically selecting text in an input field on iOS devices (mobile Safari)）。

在選擇文本之前，需要等待使用​​，否則在iOS上鍵盤出現後，元素無法正確滾動到視圖中。

使用setSelectionRange()時，將輸入類型設置爲text非常重要，否則它可能會在Chrome上引發異常（請參閱selectionStart/selectionEnd on input type="number" no longer allowed in Chrome）。