Safari 및 Chrome에서 작동하지 않는 jQuery를 사용하여 포커스가있는 텍스트 선택

Firefox 및 IE에서는 작동하지만 Chrome 및 Safari에서는 실패 (오류 없음, 작동하지 않음) 하는 다음 jQuery 코드 ( 이 질문 과 유사 함 )가 있습니다. 해결 방법에 대한 아이디어가 있습니까?

$("#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);
});

이것은 IE, Firefox, Chrome, Safari 및 Opera에서 선택하는 데 작동하지만 Firefox, Chrome 및 Safari에서 두 번 클릭하여 편집 할 수는 없습니다. 완전히 확실하지는 않지만 필드에 이미 포커스가 있어도 커서를 실제로 삽입 할 수없는 경우에도 3 개의 브라우저가 포커스 이벤트를 다시 발행했기 때문일 수 있습니다 (다시 선택하기 때문에). Opera는 그렇게하지 않는 것처럼 보이므로 포커스 이벤트가 다시 발생하지 않아 커서가 삽입됩니다.

이 스택 게시물 에서 문제가없고 모든 브라우저에서 작동 하는 더 나은 수정 사항 을 찾았습니다 .

이것은 크롬에서도 작동합니다.

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

setTimeout을 사용할 때 깜박임이 있기 때문에 다른 이벤트 기반 솔루션이 있습니다. 이렇게하면 'focus'이벤트가 '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);

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()(참조 모바일 사파리에서 작동하지 않습니다 iOS 장비 (모바일 사파리)에 입력 필드에 프로그래밍 방식 선택 텍스트 ).

requestAnimationFrame텍스트를 선택하기 전에 사용을 기다려야 합니다. 그렇지 않으면 iOS에서 키보드가 표시된 후 요소가보기로 올바르게 스크롤되지 않습니다.

사용할 때 setSelectionRange()입력 유형을로 설정하는 것이 중요합니다 text. 그렇지 않으면 Chrome에서 예외가 발생할 수 있습니다 ( Chrome에서 더 이상 허용되지 않는 input type = "number"의 selectionStart / selectionEnd 참조 ).

누군가 가이 문제를 다시 발견하면 여기에 모든 브라우저에서 작동하는 순수한 JS 솔루션이 있습니다. 변하기 쉬운

<input type="text" value="Hello world..." onFocus="window.setTimeout(() => this.select());">

(setTimeout () 없이는 Safari, 모바일 Safari 및 MS Edge에서 작동하지 않습니다)