เลือกเนื้อหาทั้งหมดของกล่องข้อความเมื่อได้รับการโฟกัส (Vanilla JS หรือ jQuery)

โซลูชัน Vanilla JS หรือ jQuery คืออะไรที่จะเลือกเนื้อหาทั้งหมดของกล่องข้อความเมื่อกล่องข้อความได้รับโฟกัส

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

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

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery ไม่ใช่ JavaScript ซึ่งใช้งานง่ายกว่าในบางกรณี

ดูตัวอย่างนี้:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

ที่มา: CSS Tricks , MDN

นี่ไม่ได้เป็นเพียงปัญหาของ Chrome / Safari ฉันมีประสบการณ์การทำงานที่คล้ายกันกับ Firefox 18.0.1 ส่วนที่ตลกคือมันไม่ได้เกิดขึ้นกับ MSIE! ปัญหานี่คือเหตุการณ์การวางเมาส์ครั้งแรกที่บังคับให้ยกเลิกการเลือกเนื้อหาอินพุตดังนั้นให้ละเว้นเหตุการณ์แรก

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

วิธี timeOut ทำให้เกิดพฤติกรรมที่แปลกและปิดกั้นเหตุการณ์การวางเมาส์ทุกครั้งที่คุณไม่สามารถลบการเลือกที่เลือกอีกครั้งในองค์ประกอบอินพุต

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

ใช้ JS:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

ใช้ JQuery:

$("#text-filed").focus(function() { $(this).select(); } );

ใช้ React JS:

ในองค์ประกอบที่เกี่ยวข้องภายในฟังก์ชั่นการแสดงผล -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

ทางออกของฉันคือใช้หมดเวลา ดูเหมือนว่าจะทำงานได้ดี

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

สิ่งนี้จะทำงานบน iOS:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

ฉันรู้ว่าโค้ดแบบอินไลน์เป็นรูปแบบที่ไม่ดี แต่ฉันไม่ต้องการที่จะใส่มันลงในไฟล์. js ทำงานได้โดยไม่ต้อง jQuery!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

คำตอบที่นี่ช่วยฉันได้ถึงจุดหนึ่ง แต่ฉันมีปัญหาในฟิลด์ป้อนข้อมูลหมายเลข HTML5 เมื่อคลิกปุ่มขึ้น / ลงใน Chrome

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

ฉันแก้ไขมันได้โดยการลบตัวจัดการเม้าส์อัพทันทีที่มันถูกทริกเกอร์ดังต่อไปนี้:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

หวังว่านี่จะช่วยผู้คนในอนาคต ...

ใช้งานได้ลองนี้ -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

ทำงานได้ใน Safari / IE 9 และ Chrome ฉันไม่ได้รับโอกาสทดสอบใน Firefox

ฉันรู้ว่ามีคำตอบมากมายที่นี่ - แต่คำตอบนี้หายไปแล้ว โซลูชันที่ใช้งานได้กับ ajax ที่สร้างเนื้อหา:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

ฉันสามารถปรับปรุงคำตอบของซัคได้เล็กน้อยด้วยการรวมฟังก์ชั่นการเรียกบางอย่าง ปัญหาเกี่ยวกับคำตอบนั้นคือมันปิดการใช้งาน onMouseUp อย่างสมบูรณ์ดังนั้นจึงป้องกันไม่ให้คุณคลิกไปที่กล่องข้อความเมื่อมีโฟกัส

นี่คือรหัสของฉัน:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

นี่คือการปรับปรุงเล็กน้อยกับคำตอบของซัค มันทำงานได้อย่างสมบูรณ์แบบใน IE ไม่ทำงานเลยใน Chrome และทำงานร่วมกับการสลับความสำเร็จใน FireFox (แท้จริงทุกครั้ง) หากใครบางคนมีความคิดเกี่ยวกับวิธีทำให้มันทำงานได้อย่างน่าเชื่อถือใน FF หรือ Chrome โปรดแบ่งปัน

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

เช่น @Travis และ @Mari ฉันต้องการเลือกอัตโนมัติเมื่อผู้ใช้คลิกซึ่งหมายถึงการป้องกันพฤติกรรมเริ่มต้นของmouseupเหตุการณ์ แต่ไม่ได้ป้องกันไม่ให้ผู้ใช้คลิก วิธีแก้ปัญหาที่ฉันพบซึ่งทำงานใน IE11, Chrome 45, Opera 32 และ Firefox 29 (นี่คือเบราว์เซอร์ที่ฉันติดตั้งอยู่ในปัจจุบัน) ขึ้นอยู่กับลำดับเหตุการณ์ที่เกี่ยวข้องในการคลิกเมาส์

เมื่อคุณคลิกที่การป้อนข้อความที่ไม่มีโฟกัสคุณจะได้รับเหตุการณ์เหล่านี้ (รวมถึงอื่น ๆ ):

• mousedown: เพื่อตอบสนองต่อการคลิกของคุณ การจัดการเริ่มต้นจะเพิ่มขึ้นfocusหากจำเป็นและกำหนดการเริ่มต้นการเลือก
• focus: mousedownเป็นส่วนหนึ่งของการจัดการเริ่มต้นของ
• mouseup: ความสมบูรณ์ของการคลิกของคุณซึ่งการจัดการเริ่มต้นจะเป็นการสิ้นสุดการเลือก

เมื่อคุณคลิกที่ตัวอักษรที่มีโฟกัสอยู่แล้วfocusเหตุการณ์จะถูกข้ามไป ในฐานะที่เป็น @Travis และ @Mari ทั้งสองสังเกตเห็นอย่างชาญฉลาดการจัดการmouseupความต้องการเริ่มต้นที่จะต้องป้องกันเฉพาะในfocusกรณีที่เกิดเหตุการณ์ อย่างไรก็ตามเนื่องจากไม่มีfocusเหตุการณ์ "ไม่เกิดขึ้น" เราจึงต้องสรุปเรื่องนี้ซึ่งเราสามารถทำได้ภายในmousedownตัวจัดการ

@ วิธีแก้ปัญหาของ Mari ต้องการ jQuery ที่ต้องนำเข้าซึ่งฉันต้องการหลีกเลี่ยง @ document.activeElementวิธีการแก้ปัญหาของเทรวิสไม่นี้โดยการตรวจสอบ ฉันไม่รู้ว่าทำไมโซลูชันของเขาไม่ทำงานในเบราว์เซอร์ แต่มีวิธีอื่นในการติดตามว่าการป้อนข้อความมีจุดสนใจหรือไม่: เพียงติดตามfocusและblurกิจกรรม

นี่คือรหัสที่เหมาะกับฉัน:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

ฉันหวังว่านี่จะช่วยให้ใครบางคน :-)

onclick="this.focus();this.select()"

เป็นวิธีการแก้ปัญหา JavaScript หรือ jQuery อะไรที่จะเลือกเนื้อหาทั้งหมดของช่องเมื่อช่องที่ได้รับการมุ่งเน้น ?

คุณจะต้องเพิ่มคุณสมบัติต่อไปนี้:

onfocus="this.select()"

ตัวอย่างเช่น:

<input type="text" value="sometext" onfocus="this.select()">

(จริงๆแล้วฉันไม่มีเงื่อนงำว่าทำไมคุณต้องการอะไรอีก)

สิ่งนี้ใช้ได้สำหรับฉัน (การโพสต์เนื่องจากไม่ใช่คำตอบ แต่อยู่ในความคิดเห็น)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

แก้ไข: ตามคำขอของ @ DavidG ฉันไม่สามารถให้รายละเอียดได้เพราะฉันไม่แน่ใจว่าทำไมมันถึงใช้งานได้ แต่ฉันเชื่อว่ามันมีบางอย่างที่เกี่ยวข้องกับเหตุการณ์โฟกัสที่แพร่กระจายขึ้นหรือลงหรืออะไรก็ตามที่มันทำ มันได้รับการมุ่งเน้น การตั้งค่าการหมดเวลาให้องค์ประกอบสักครู่เพื่อให้ทราบว่ามันทำไปแล้ว

หากคุณโยงเหตุการณ์เข้าด้วยกันฉันเชื่อว่ามันไม่จำเป็นต้องใช้.oneตามคำแนะนำที่อื่นในหัวข้อนี้

ตัวอย่าง:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

หมายเหตุ: หากคุณกำลังเขียนโปรแกรมใน ASP.NET คุณสามารถเรียกใช้สคริปต์โดยใช้ ScriptManager.RegisterStartupScript ใน C #:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

หรือเพียงพิมพ์สคริปต์ในหน้า HTML ที่แนะนำในคำตอบอื่น ๆ

ฉันหว่านสิ่งนี้ที่ทำงานได้อย่างสมบูรณ์แบบ!

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

ฉันไปงานปาร์ตี้ช้า แต่ก็ใช้งานได้ดีใน IE11, Chrome, Firefox โดยไม่ต้องทำเม้าส์ (และไม่มี JQuery)

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

ทางออกของฉันคือต่อไป:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

ดังนั้นการวางเมาส์จะทำงานได้ตามปกติ แต่จะไม่ทำการยกเลิกการเลือกหลังจากได้รับโฟกัสโดยการป้อนข้อมูล