[jquery] jquery 입력 초점에 모두 선택

Program / 글쓴이

이 코드를 사용하여 사용자가 필드에 초점을 맞출 때 필드의 모든 텍스트를 선택하려고합니다. 무슨 일이 일어 났는지, 그것은 1 초 동안 모두를 선택한 다음 선택되지 않고 입력 커서는 내가 클릭 한 곳에 남아 있습니다 …

$("input[type=text]").focus(function() {
   $(this).select();
});

모든 것이 선택된 상태로 유지되기를 원합니다.

답변

click대신에 사용해보십시오 focus. 마우스 및 주요 이벤트 모두에서 작동하는 것 같습니다 (적어도 Chrome / Mac에서는).

jQuery <버전 1.7 :

$("input[type='text']").click(function () {
   $(this).select();
});

jQuery 버전 1.7 이상 :

$("input[type='text']").on("click", function () {
   $(this).select();
});

여기 데모가 있습니다

답변

나는 이것이 일어나는 일이라고 생각합니다.

focus()
   UI tasks related to pre-focus
   callbacks
       select()
   UI tasks related to focus (which unselect again)

해결 방법은 select ()를 비동기 적으로 호출하여 focus () 후에 완전히 실행되도록 할 수 있습니다.

$("input[type=text]").focus(function() {
    var save_this = $(this);
    window.setTimeout (function(){
       save_this.select();
    },100);
});

답변

이것이 더 나은 해결책이라고 생각합니다. 단순히 클릭 이벤트를 선택하는 것과 달리 마우스로 텍스트를 선택 / 편집하는 것을 막을 수는 없습니다. IE8을 포함한 주요 렌더링 엔진과 함께 작동합니다.

$('input').on('focus', function (e) {
    $(this)
        .one('mouseup', function () {
            $(this).select();
            return false;
        })
        .select();
});

http://jsfiddle.net/25Mab/9/

답변

여기에 괜찮은 답변이 있으며 @ user2072367이 내가 가장 좋아하는 곳이지만 클릭이 아닌 탭을 통해 초점을 맞출 때 예기치 않은 결과가 발생합니다. (예기치 않은 결과 : 탭을 통해 초점을 맞춘 후 텍스트를 정상적으로 선택하려면 한 번 더 클릭해야합니다)

이 바이올린 은 작은 버그를 수정하고 중복 DOM 선택을 피하기 위해 변수에 $ (this)를 추가로 저장합니다. 확인 해봐! (:

IE> 8에서 테스트

$('input').on('focus', function() {
    var $this = $(this)
        .one('mouseup.mouseupSelect', function() {
            $this.select();
            return false;
        })
        .one('mousedown', function() {
            // compensate for untriggered 'mouseup' caused by focus via tab
            $this.off('mouseup.mouseupSelect');
        })
        .select();
});

답변

주의 깊게 검토 한 후이 스레드 내에서 훨씬 깨끗한 솔루션으로 제안합니다.

$("input").focus(function(){
    $(this).on("click.a keyup.a", function(e){
        $(this).off("click.a keyup.a").select();
    });
});

jsFiddle의 데모

문제 :

다음은 약간의 설명입니다.

먼저, 마우스를 움직이거나 필드를 탭할 때 이벤트 순서를 살펴 보겠습니다.
다음과 같이 모든 관련 이벤트를 기록 할 수 있습니다.

$("input").on("mousedown focus mouseup click blur keydown keypress keyup change",
              function(e) { console.log(e.type); });

포커스 이벤트

참고 : 이벤트 파이프 라인에서 나중에 발생 하는 click대신 이 솔루션을 사용하도록 변경 mouseup했으며 @Jocie의 의견에 따라 firefox에서 일부 문제를 일으키는 것으로 보입니다.

일부 브라우저는 mouseup또는 click이벤트 중에 커서를 배치하려고 합니다. 캐럿을 한 위치에서 시작하고 위로 드래그하여 일부 텍스트를 강조 할 수 있기 때문에 이치에 맞습니다. 실제로 마우스를 들어 올릴 때까지 캐럿 위치를 지정할 수 없습니다. 따라서 처리 focus하는 함수가 너무 일찍 응답하여 페이징되어 브라우저가 위치를 재정의하도록합니다.

그러나 문제는 우리가 실제로 초점 이벤트를 처리하고 싶다는 것입니다. 누군가가 현장에 처음 들어 왔을 때 알려줍니다. 그 후에는 사용자 선택 동작을 계속 무시하고 싶지 않습니다.

해결책:

대신, focus이벤트 처리기 내에서 시작 하려는 click(클릭 인) 및 keyup(탭 인) 이벤트 에 대한 리스너를 빠르게 연결할 수 있습니다 .

참고 : 탭 이벤트의 키 업은 실제로 이전 입력 필드가 아닌 새 입력 필드에서 발생합니다

한 번만 이벤트를 시작하려고합니다. 사용할 수는 .one("click keyup)있지만 각 이벤트 유형에 대해 이벤트 핸들러를 한 번 호출합니다 . 대신 mouseup 또는 keyup을 누르는 즉시 함수를 호출합니다. 가장 먼저 할 일은 둘 다 처리기를 제거하는 것입니다. 그렇게하면 탭이나 마우스로 입력했는지 여부는 중요하지 않습니다. 함수는 정확히 한 번만 실행되어야합니다.

참고 : 대부분의 브라우저는 탭 이벤트 중에 자연스럽게 모든 텍스트를 선택하지만 animatedgif가 지적한 것처럼keyup 이벤트 를 처리하려고합니다 . 그렇지 않으면 이벤트 를 처리 mouseup할 때마다 이벤트가 계속 남아 있습니다. 선택을 처리하자마자 리스너에서

이제 전화 할 수 있습니다 select() 브라우저가 선택한 후에 있으므로 기본 동작을 무시합니다.

마지막으로, 추가적인 보호 를 위해 and 네임 스페이스 에 이벤트 네임 스페이스 를 추가 하여 메소드가 다른 리스너를 제거하지 않도록 할 수 있습니다.mouseupkeyup.off()

IE 10 이상, FF 28 이상 및 Chrome 35 이상에서 테스트

또는 호출once 된 함수로 jQuery를 확장하려는 경우 이벤트 수에 대해 정확히 한 번만 발생합니다 .

$.fn.once = function (events, callback) {
    return this.each(function () {
        var myCallback = function (e) {
            callback.call(this, e);
            $(this).off(events, myCallback);
        };
        $(this).on(events, myCallback);
    });
};

그런 다음 코드를 다음과 같이 더 단순화 할 수 있습니다.

$("input").focus(function(){
    $(this).once("click keyup", function(e){
        $(this).select();
    });
});

바이올린 데모

답변

이것은 작업을 수행하고 더 이상 마우스로 텍스트의 일부를 선택할 수없는 문제를 피합니다.

$("input[type=text]").click(function() {
    if(!$(this).hasClass("selected")) {
        $(this).select();
        $(this).addClass("selected");
    }
});
$("input[type=text]").blur(function() {
    if($(this).hasClass("selected")) {
        $(this).removeClass("selected");
    }
});

답변

이 버전은 iOS에서 작동하며 Windows 크롬에서 표준 드래그하여 선택을 수정합니다.

var srcEvent = null;

$("input[type=text],input[type=number]")

    .mousedown(function (event) {
        srcEvent = event;
    })

    .mouseup(function (event) {
        var delta = Math.abs(event.clientX - srcEvent.clientX)
                  + Math.abs(event.clientY - srcEvent.clientY);

        var threshold = 2;
        if (delta <= threshold) {
                   try {
                        // ios likes this but windows-chrome does not on number fields
                        $(this)[0].selectionStart = 0;
                        $(this)[0].selectionEnd = 1000;
                    } catch (e) {
                        // windows-chrome likes this
                        $(this).select();
                    }
        }
    });

http://jsfiddle.net/Zx2sc/2/