FirefoxとIEで動作する次のjQueryコード( この質問 に似ています)がありますが、ChromeおよびSafari。回避策のアイデアはありますか?
$("#souper_fancy").focus(function() { $(this).select() });
選択が選択解除される原因となっているのはonmouseupイベントであるため、追加するだけです。
$("#souper_fancy").mouseup(function(e){
e.preventDefault();
});
$('#randomfield').focus(function(event) {
setTimeout(function() {$('#randomfield').select();}, 0);
});
これは、input type = "text"要素に対して正常に機能します。 #souper_fancyとはどのような要素ですか?
$("#souper_fancy").focus(function() {
$(this).select();
});
Mouseupのデフォルトを防止するだけで、テキスト選択は常にオンになります。 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);
});
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()
はモバイルSafariでは機能しないため、select()
の代わりにselect()
を使用します( iOSデバイスの入力フィールドのプログラムによる選択(モバイルSafari) )。
テキストを選択する前にrequestAnimationFrame
を使用して待機する必要があります。そうしないと、iOSでキーボードが表示された後に要素が正しくスクロールされません。
setSelectionRange()
を使用する場合、入力タイプをtext
に設定することが重要です。そうしないと、Chrome( selectionStart/selectionEndを参照)入力時にtype = "number"はChromeでは許可されなくなりました )。
これはIE、Firefox、Chrome、Safari、Operaでの選択には有効ですが、Firefox、Chrome、Safariで2回クリックして編集することはできません。確かではありませんが、フィールドに既にフォーカスがあるにもかかわらず、3つのブラウザーがフォーカスイベントを再発行しているため、実際にカーソルを挿入することはできません(もう一度選択するため)。 IE and Opera実行していないように見えるため、フォーカスイベントが再度発生せず、カーソルが挿入されます。
より良い修正を見つけました このStack postで その問題はなく、すべてのブラウザで動作します。
SetTimeoutを使用するとちらつきが発生するため、別のイベントベースのソリューションがあります。このように、「フォーカス」イベントは「マウスアップ」イベントをアタッチし、イベントハンドラーは再び自身をデタッチします。
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);
これはクロムでも動作するはずです:
$("#souper_fancy").focus(function() {
var tempSouper = $(this);
setTimeout(function(){
tempSouper.select();
},100);
});
誰かがこの問題に再び出くわした場合、私はここで(現在)すべてのブラウザを含む純粋なJSソリューションを手に入れました。モバイル
<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">
(setTimeout()なしでは、Safari、モバイルSafari、MS Edgeで動作しません)