jQuery - เลือกข้อความทั้งหมดจาก textarea

ฉันจะทำมันได้อย่างไรเมื่อคุณคลิกภายในพื้นที่ข้อความเนื้อหาทั้งหมดจะถูกเลือก

และในที่สุดเมื่อคุณคลิกอีกครั้งเพื่อยกเลิกการเลือก

เพื่อไม่ให้ผู้ใช้รู้สึกรำคาญเมื่อมีการเลือกข้อความทั้งหมดทุกครั้งที่พยายามย้ายคาเร็ตโดยใช้เมาส์คุณควรทำสิ่งนี้โดยใช้focusเหตุการณ์ไม่ใช่clickเหตุการณ์ ต่อไปนี้จะทำงานและแก้ไขปัญหาใน Chrome ที่ป้องกันไม่ให้เวอร์ชันที่ง่ายที่สุด (เช่นการเรียกselect()เมธอดtextarea ในfocusตัวจัดการเหตุการณ์) ไม่ให้ทำงาน

jsFiddle: http://jsfiddle.net/NM62A/

รหัส:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

jQuery เวอร์ชัน:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});

วิธีที่ดีกว่าด้วยวิธีแก้ปัญหาแท็บและ Chrome และวิธี jquery ใหม่

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

ฉันลงเอยด้วยการใช้สิ่งนี้:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

เวอร์ชัน jQuery ที่สั้นกว่าเล็กน้อย:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

จัดการเคสเข้ามุม Chrome ได้อย่างถูกต้อง ดูhttp://jsfiddle.net/Ztyx/XMkwm/สำหรับตัวอย่าง

การเลือกข้อความในองค์ประกอบ (คล้ายกับการไฮไลต์ด้วยเมาส์ของคุณ)

:)

เมื่อใช้คำตอบที่ยอมรับในโพสต์นั้นคุณสามารถเรียกใช้ฟังก์ชันดังนี้:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});