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

Program / 글쓴이

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);