jquery 입력 초점에 모두 선택

이 코드를 사용하여 사용자가 필드에 초점을 맞출 때 필드의 모든 텍스트를 선택하려고합니다. 무슨 일이 일어 났는지, 그것은 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/

이러한 솔루션의 대부분의 문제점은 입력 필드 내에서 커서 위치를 변경할 때 올바르게 작동하지 않는다는 것입니다.

onmouseup이벤트 후 해고 분야 내에서 커서의 위치 변경 onfocus(적어도 크롬과 FF 내를). 무조건 폐기하면 mouseup사용자는 마우스로 커서 위치를 변경할 수 없습니다.

function selectOnFocus(input) {
    input.each(function (index, elem) {
        var jelem = $(elem);
        var ignoreNextMouseUp = false;

        jelem.mousedown(function () {
            if (document.activeElement !== elem) {
                ignoreNextMouseUp = true;
            }
        });
        jelem.mouseup(function (ev) {
            if (ignoreNextMouseUp) {
                ev.preventDefault();
                ignoreNextMouseUp = false;
            }
        });
        jelem.focus(function () {
            jelem.select();
        });
    });
}
selectOnFocus($("#myInputElement"));

mouseup필드에 현재 포커스가없는 경우 코드는 기본적으로 기본 동작을 방지합니다 . 다음과 같은 경우에 작동합니다.

• 필드에 포커스가 없을 때 클릭
• 필드에 포커스가있을 때 클릭
• 현장으로 태핑

Chrome 31, FF 26 및 IE 11에서 이것을 테스트했습니다.

이 글타래를 읽는 멋진 해결책을 찾았습니다.

$(function(){

    jQuery.selectText('input:text');
    jQuery.selectText('input:password');

});

jQuery.extend( {
    selectText: function(s) { 
        $(s).live('focus',function() {
            var self = $(this);
            setTimeout(function() {self.select();}, 0);
        });
    }
});

나는 2016 년 말에 왔으며이 코드는 최신 버전의 jquery (이 경우 jquery-2.1.3.js)에서만 작동합니다.

if ($(element).is("input")) {
    $(element).focus(function () {
        $(element).select();
    });
}

FF 16.0.2 및 jquery 1.8.3을 사용하면 답변의 모든 코드가 작동하지 않았습니다.
나는 이와 같은 코드를 사용하고 작동합니다.

$("input[type=text]").focus().select();

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

두 입력간에 빠르게 전환 할 경우 보안을 강화하려면 clearTimeout을 사용하십시오. clearTimeout 이전 시간 초과를 정리하십시오 ...

기본 JavaScript와 잘 작동합니다 select().

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

또는 일반적으로 :

$("input[type=text]")[0].select()

또는 <input onclick="select()">Works를 완벽하게 사용할 수 있습니다 .

간단한 코드를 사용할 수 있습니다 :

$('#idname').select();

<script>$.ready( $("input[type=text]").attr("onclick" , "this.select()"));<script>

나는 항상 requestAnimationFrame()내부 이벤트 후 메커니즘을 뛰어 넘으며 Firefox에서 완벽하게 작동합니다. Chrome에서 테스트하지 않았습니다.

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