อินพุต jquery เลือกทั้งหมดในการโฟกัส

ฉันใช้รหัสนี้เพื่อลองและเลือกข้อความทั้งหมดในฟิลด์เมื่อผู้ใช้เน้นที่ฟิลด์ สิ่งที่เกิดขึ้นคือมันเลือกทั้งหมดเป็นวินาทีจากนั้นจะไม่ได้เลือกและเคอร์เซอร์พิมพ์จะอยู่ตรงที่ฉันคลิก ...

$("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 () แบบอะซิงโครนัสเพื่อให้ทำงานได้อย่างสมบูรณ์หลังจากการโฟกัส ():

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

ฉันคิดว่านี่เป็นทางออกที่ดีกว่า ซึ่งแตกต่างจากการเลือกเพียงแค่ในเหตุการณ์ onclick มันไม่ได้ป้องกันการเลือก / แก้ไขข้อความด้วยเมาส์ มันทำงานร่วมกับเอ็นจิ้นการเรนเดอร์หลัก ๆ รวมถึง IE8

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

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

มีบางคำตอบที่ดีที่นี่และ @ user2072367 เป็นที่ชื่นชอบของฉัน แต่มันมีผลลัพธ์ที่ไม่คาดคิดเมื่อคุณมุ่งเน้นไปที่แท็บแทนที่จะคลิกผ่าน (ผลลัพธ์ที่ไม่คาดคิด: เมื่อต้องการเลือกข้อความตามปกติหลังจากโฟกัสผ่านแท็บคุณต้องคลิกอีกหนึ่งครั้ง)

ซอนี้แก้ไขข้อผิดพลาดเล็ก ๆ และเก็บ $ (สิ่งนี้) ในตัวแปรเพื่อหลีกเลี่ยงการเลือก DOM ที่ซ้ำซ้อน ลองดูสิ! (:

ทดสอบใน 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ที่จะเกิดขึ้นในภายหลังในท่อส่งเหตุการณ์และดูเหมือนว่าจะก่อให้เกิดปัญหาบางอย่างใน firefox ตามความคิดเห็นของ @ Jocie

เบราว์เซอร์บางตัวพยายามวางตำแหน่งเคอร์เซอร์ระหว่างmouseupหรือclickเหตุการณ์ สิ่งนี้สมเหตุสมผลแล้วเนื่องจากคุณอาจต้องการเริ่มเครื่องหมายรูปหมวกในตำแหน่งเดียวและลากเพื่อเน้นข้อความบางส่วน ไม่สามารถกำหนดตำแหน่งลูกศรได้จนกว่าคุณจะยกเมาส์ขึ้นจริง ดังนั้นฟังก์ชั่นที่จัดการfocusจะโชคชะตาที่จะตอบสนองเร็วเกินไปออกจากเบราว์เซอร์เพื่อแทนที่ตำแหน่งของคุณ

แต่ถูคือเราต้องการจัดการกับเหตุการณ์โฟกัส มันช่วยให้เรารู้ว่าครั้งแรกที่มีคนเข้ามาในสนาม หลังจากจุดนั้นเราไม่ต้องการแทนที่พฤติกรรมการเลือกของผู้ใช้ต่อไป

การแก้ไขปัญหา:

แต่ภายในfocusตัวจัดการเหตุการณ์เราสามารถแนบผู้ฟังสำหรับเหตุการณ์click(คลิกเข้า) และkeyup(แท็บใน) แทนเหตุการณ์ที่กำลังจะเริ่มขึ้น

หมายเหตุ : การกดคีย์ของเหตุการณ์แท็บจะเริ่มขึ้นจริงในฟิลด์อินพุตใหม่ไม่ใช่คีย์ก่อนหน้า

เราต้องการไฟเหตุการณ์เพียงครั้งเดียว เราสามารถใช้.one("click keyup)แต่ตอนนี้จะเรียกตัวจัดการเหตุการณ์ครั้งสำหรับแต่ละประเภทเหตุการณ์ เราจะเรียกฟังก์ชันของเราแทนทันทีที่กดปุ่มเม้าส์หรือคีย์ สิ่งแรกที่เราจะทำคือลบตัวจัดการสำหรับทั้งสอง ด้วยวิธีนี้มันจะไม่สำคัญว่าเราจะแท็บหรือ moused ในฟังก์ชั่นควรดำเนินการเพียงครั้งเดียว

หมายเหตุ : เบราว์เซอร์ส่วนใหญ่เลือกข้อความทั้งหมดในระหว่างเหตุการณ์แท็บ แต่เมื่อanimatedgif ชี้ให้เห็นเรายังคงต้องการจัดการkeyupเหตุการณ์ไม่เช่นนั้นmouseupกิจกรรมจะยังคงวนเวียนอยู่ตลอดเวลาที่เราแท็บเราฟังทั้งคู่เพื่อให้เราสามารถเปลี่ยนได้ ปิดผู้ฟังทันทีที่เราประมวลผลการเลือก

ตอนนี้เราสามารถโทรหาselect()หลังจากที่เบราว์เซอร์ทำการเลือกเพื่อให้แน่ใจว่าจะแทนที่พฤติกรรมเริ่มต้น

ในที่สุดเพื่อการปกป้องเป็นพิเศษเราสามารถเพิ่มเนมสเปซของเหตุการณ์ในmouseupและkeyupฟังก์ชั่นเพื่อให้.off()วิธีการไม่ลบผู้ฟังอื่น ๆ ที่อาจจะเล่น

ผ่านการทดสอบใน IE 10+, FF 28+ และ Chrome 35+

อีกทางเลือกหนึ่งถ้าคุณต้องการขยาย jQuery ด้วยฟังก์ชั่นที่เรียกonceว่าจะทำงานหนึ่งครั้งสำหรับเหตุการณ์ใด ๆ :

$.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 chrome

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(อย่างน้อยภายใน Chrome และ 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 ล้างการหมดเวลาเก่า ...

ทำงานที่ดีกับชาวพื้นเมือง select()JavaScript

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

หรือโดยทั่วไป:

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

หรือคุณสามารถใช้<input onclick="select()">งานได้สมบูรณ์แบบ

คุณสามารถใช้รหัสง่าย ๆ :

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

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

ฉันมักจะใช้requestAnimationFrame()เพื่อข้ามกลไกการโพสต์เหตุการณ์ภายในและสิ่งนี้ทำงานได้อย่างสมบูรณ์ใน Firefox ยังไม่ได้ทดสอบใน Chrome

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