Chọn tất cả nội dung của hộp văn bản khi nhận được tiêu điểm (Vanilla JS hoặc jQuery)

Giải pháp Vanilla JS hoặc jQuery sẽ chọn tất cả nội dung của hộp văn bản khi hộp văn bản nhận được tiêu điểm là gì?

$(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 không phải là JavaScript dễ sử dụng hơn trong một số trường hợp.

Nhìn vào ví dụ này:

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

Nguồn: Thủ thuật CSS , MDN

Đây không chỉ là sự cố Chrome / Safari, tôi đã trải nghiệm một hành vi khá giống với Firefox 18.0.1. Điều thú vị là điều này không xảy ra trên MSIE! Vấn đề ở đây là sự kiện mouseup đầu tiên buộc phải bỏ chọn nội dung đầu vào, vì vậy chỉ cần bỏ qua sự xuất hiện đầu tiên.

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

Cách tiếp cận timeOut gây ra một hành vi lạ và chặn mọi sự kiện mouseup bạn không thể xóa lựa chọn nhấp lại vào phần tử đầu vào.

HTML:

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

Sử dụng JS:

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

Sử dụng JQuery:

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

Sử dụng React JS:

Trong thành phần tương ứng bên trong chức năng kết xuất -

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

Giải pháp của tôi là sử dụng thời gian chờ. Có vẻ hoạt động tốt

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

Điều này cũng sẽ hoạt động trên iOS:

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

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

Tôi biết mã nội tuyến là kiểu xấu, nhưng tôi không muốn đưa mã này vào tệp .js. Hoạt động mà không cần 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>

Các câu trả lời ở đây đã giúp tôi đạt đến một điểm, nhưng tôi gặp vấn đề với các trường nhập số HTML5 khi nhấp vào nút lên / xuống trong Chrome.

Nếu bạn nhấp vào một trong các nút và để chuột qua nút, số sẽ tiếp tục thay đổi như thể bạn đang giữ nút chuột vì chuột bị vứt đi.

Tôi đã giải quyết điều này bằng cách gỡ bỏ trình xử lý mouseup ngay khi nó được kích hoạt như dưới đây:

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

Hy vọng điều này sẽ giúp mọi người trong tương lai ...

Điều này sẽ làm việc, Hãy thử cái này -

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

Hoạt động trong Safari / IE 9 và Chrome, mặc dù tôi không có cơ hội thử nghiệm trên Firefox.

Tôi biết đã có rất nhiều câu trả lời ở đây - nhưng câu trả lời này cho đến nay vẫn còn thiếu; một giải pháp cũng hoạt động với nội dung được tạo ajax:

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

Tôi đã có thể cải thiện một chút câu trả lời của Zach bằng cách kết hợp một vài cuộc gọi chức năng. Vấn đề với câu trả lời đó là nó vô hiệu hóa hoàn toàn trênMouseUp, do đó ngăn bạn nhấp xung quanh trong hộp văn bản một khi nó tập trung.

Đây là mã của tôi:

<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>

Đây là một cải tiến nhỏ so với câu trả lời của Zach. Nó hoạt động hoàn hảo trong IE, hoàn toàn không hoạt động trong Chrome và hoạt động với thành công xen kẽ trong FireFox (nghĩa đen là mọi lúc). Nếu ai đó có ý tưởng về cách làm cho nó hoạt động đáng tin cậy trong FF hoặc Chrome, vui lòng chia sẻ.

Dù sao, tôi hình dung tôi sẽ chia sẻ những gì tôi có thể để làm cho nó đẹp hơn một chút.

Giống như @Travis và @Mari, tôi muốn tự động chọn khi người dùng nhấp vào, có nghĩa là ngăn hành vi mặc định của mouseupsự kiện, nhưng không ngăn người dùng nhấp xung quanh. Giải pháp tôi đưa ra, hoạt động trong IE11, Chrome 45, Opera 32 và Firefox 29 (đây là những trình duyệt tôi hiện đã cài đặt), dựa trên chuỗi các sự kiện liên quan đến một cú click chuột.

Khi bạn nhấp vào một kiểu nhập văn bản không có tiêu điểm, bạn sẽ nhận được các sự kiện này (trong số các sự kiện khác):

• mousedown: Đáp lại nhấp chuột của bạn. Tăng xử lý mặc địnhfocus nếu cần thiết và bắt đầu lựa chọn.
• focus: Là một phần của việc xử lý mặc định của mousedown .
• mouseup: Việc hoàn thành nhấp chuột của bạn, có xử lý mặc định sẽ đặt kết thúc lựa chọn.

Khi bạn bấm vào một kiểu nhập văn bản đã có tiêu điểm, focussự kiện sẽ bị bỏ qua. Vì @Travis và @Mari đều chú ý một cách khéo léo, việc xử lý mặc định các mouseupnhu cầu chỉ được ngăn chặn nếu focussự kiện xảy ra. Tuy nhiên, vì không có "focus sự kiện "không xảy ra", chúng ta cần suy ra điều này, điều chúng ta có thể làm trong phần mousedownxử lý.

Giải pháp @ Mari's yêu cầu jQuery được nhập, điều mà tôi muốn tránh. Giải pháp của @ Travis thực hiện điều này bằng cách kiểm tra document.activeElement. Tôi không biết tại sao chính xác giải pháp của anh ấy không hoạt động trên các trình duyệt, nhưng có một cách khác để theo dõi liệu đầu vào văn bản có tập trung hay không: chỉ cần làm theofocus vàblur sự kiện sự kiện.

Đây là mã làm việc cho tôi:

    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;
      };

Tôi hy vọng điều này là giúp đỡ cho một ai đó. :-)

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

Giải pháp JavaScript hoặc jQuery sẽ chọn tất cả nội dung của hộp văn bản khi hộp văn bản nhận được tiêu điểm là gì?

Bạn chỉ cần thêm thuộc tính sau:

onfocus="this.select()"

Ví dụ:

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

(Thành thật mà nói tôi không biết tại sao bạn lại cần bất cứ thứ gì khác.)

Điều này làm việc cho tôi (đăng vì nó không phải trong câu trả lời nhưng trong một bình luận)

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

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

Chỉnh sửa: Yêu cầu của Per @ DavidG, tôi không thể cung cấp chi tiết vì tôi không chắc tại sao điều này hoạt động, nhưng tôi tin rằng nó có liên quan đến sự kiện tập trung truyền lên hoặc xuống hoặc bất cứ điều gì và yếu tố đầu vào nhận thông báo nó đã nhận được trọng tâm. Đặt thời gian chờ sẽ cho phần tử một chút thời gian để nhận ra nó đã được thực hiện.

Nếu bạn xâu chuỗi các sự kiện lại với nhau, tôi tin rằng nó sẽ loại bỏ nhu cầu sử dụng .one như được đề xuất ở những nơi khác trong chuỗi này.

Thí dụ:

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

Lưu ý: Nếu bạn đang lập trình trong ASP.NET, bạn có thể chạy tập lệnh bằng ScriptManager.RegisterStartupScript trong C #:

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

Hoặc chỉ cần nhập tập lệnh trong trang HTML được đề xuất trong các câu trả lời khác.

Tôi gieo cái này ở đâu đó, làm việc hoàn hảo!

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

Tôi đến dự tiệc muộn, nhưng điều này hoạt động hoàn hảo trong IE11, Chrome, Firefox, mà không làm rối tung mouseup (và không có 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);
        });
    }
});

Giải pháp của tôi là tiếp theo:

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;
     });
});

Vì vậy, mouseup sẽ hoạt động thường xuyên, nhưng sẽ không bỏ chọn sau khi lấy nét bằng đầu vào