Chọn tất cả văn bản trong nhập văn bản HTML khi nhấp vào

Tôi có đoạn mã sau để hiển thị hộp văn bản trong trang web HTML.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Khi trang hiển thị, văn bản chứa thông báo Vui lòng nhập thông báo ID người dùng . Tuy nhiên, tôi thấy rằng người dùng cần nhấp 3 lần để chọn tất cả văn bản (trong trường hợp này là Vui lòng nhập ID người dùng ).

Có thể chọn toàn bộ văn bản chỉ với một cú nhấp chuột?

Biên tập:

Xin lỗi, tôi quên nói: Tôi phải sử dụng đầu vào type="text"

Bạn có thể sử dụng đoạn mã javascript này:

<input onClick="this.select();" value="Sample Text" />

Nhưng rõ ràng nó không hoạt động trên Safari di động. Trong những trường hợp bạn có thể sử dụng:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Các giải pháp được đăng trước đó có hai quirks:

1. Trong Chrome, lựa chọn qua .select () không dính - thêm một chút thời gian chờ giải quyết vấn đề này.
2. Không thể đặt con trỏ tại một điểm mong muốn sau khi lấy nét.

Đây là một giải pháp hoàn chỉnh, chọn tất cả văn bản trên tiêu điểm, nhưng cho phép chọn một điểm con trỏ cụ thể sau khi lấy nét.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

Html (bạn sẽ phải đặt thuộc tính onclick trên mỗi đầu vào mà bạn muốn nó hoạt động trên trang)

 <input type="text" value="click the input to select" onclick="this.select();"/>

HOẶC MỘT TÙY CHỌN TỐT HƠN

jQuery (điều này sẽ hoạt động cho mọi kiểu nhập văn bản trên trang, không cần thay đổi html của bạn):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

Tôi biết điều này đã cũ, nhưng tùy chọn tốt nhất là sử dụng placeholderthuộc tính HTML mới nếu có thể:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Điều này sẽ khiến văn bản hiển thị trừ khi nhập giá trị, loại bỏ nhu cầu chọn văn bản hoặc xóa đầu vào.

Các câu trả lời được liệt kê là một phần theo tôi. Tôi đã liên kết dưới đây hai ví dụ về cách thực hiện điều này trong Angular và với JQuery.

Giải pháp này có các tính năng sau:

• Hoạt động cho tất cả các trình duyệt hỗ trợ JQuery, Safari, Chrome, IE, Firefox, v.v.
• Hoạt động cho Phonegap / Cordova: Android và IOs.
• Chỉ chọn tất cả một lần sau khi đầu vào được lấy nét cho đến lần mờ tiếp theo và sau đó lấy nét
• Nhiều đầu vào có thể được sử dụng và nó không bị trục trặc.
• Angular directive có khả năng sử dụng lại tuyệt vời chỉ đơn giản là thêm lệnh select-all-on-click
• JQuery có thể được sửa đổi dễ dàng

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Góc cạnh: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

Thử:

onclick="this.select()"

Đó là công việc tốt cho tôi.

Bạn luôn có thể sử dụng document.execCommand( được hỗ trợ trong tất cả các trình duyệt chính )

document.execCommand("selectall",null,false);

Chọn tất cả văn bản trong phần tử hiện đang tập trung.

tự động lấy nét, với sự kiện onf Focus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Điều này cho phép bạn mở một biểu mẫu với phần tử mong muốn được chọn. Nó hoạt động bằng cách sử dụng tự động lấy nét để nhấn đầu vào, sau đó tự gửi một sự kiện lấy nét, sau đó chọn văn bản.

Lưu ý: Khi bạn xem xét onclick="this.select()", Ở lần nhấp đầu tiên, Tất cả các ký tự sẽ được chọn, Sau đó, có thể bạn muốn chỉnh sửa nội dung nào đó trong đầu vào và nhấp lại giữa các ký tự nhưng nó sẽ chọn lại tất cả các ký tự. Để khắc phục vấn đề này, bạn nên sử dụng onfocusthay vì onclick.

Thật vậy, sử dụng onclick="this.select();"nhưng nhớ không kết hợp nó với disabled="disabled"- nó sẽ không hoạt động sau đó và bạn sẽ cần phải chọn thủ công hoặc nhiều lần nhấp để chọn, vẫn. Nếu bạn muốn khóa giá trị nội dung được chọn, hãy kết hợp với thuộc tính readonly.

Đây là phiên bản có thể sử dụng lại của câu trả lời của Shoban:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

Bằng cách đó bạn có thể sử dụng lại tập lệnh rõ ràng cho nhiều yếu tố.

Bạn có thể thay thế

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Với:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Trình giữ chỗ được sử dụng để thay thế giá trị như cách bạn muốn mọi người có thể Nhập vào hộp văn bản mà không phải nhấp nhiều lần hoặc sử dụng ctrl + a. Trình giữ chỗ làm cho nó không phải là một giá trị nhưng như tên cho thấy một người giữ chỗ. Đó là những gì được sử dụng trong nhiều biểu mẫu trực tuyến có nội dung "Tên người dùng ở đây" hoặc "Email" và khi bạn nhấp vào đó, "Email" sẽ biến mất và bạn có thể bắt đầu nhập ngay.

Giải pháp chính xác cho những gì bạn yêu cầu là:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Nhưng tôi cho rằng, bạn đang cố gắng hiển thị "Vui lòng nhập ID người dùng" dưới dạng giữ chỗ hoặc gợi ý trong đầu vào. Vì vậy, bạn có thể sử dụng như một giải pháp hiệu quả hơn:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Đây là một ví dụ trong React, nhưng nó có thể được dịch sang jQuery trên vanilla JS nếu bạn thích:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

Mẹo ở đây là sử dụng onMouseDownvì phần tử đã nhận được tiêu điểm vào thời điểm sự kiện "nhấp chuột" kích hoạt (và do đó activeElementkiểm tra sẽ thất bại).

Việc activeElementkiểm tra là cần thiết để người dùng có thể định vị con trỏ của họ ở nơi họ muốn mà không cần liên tục chọn lại toàn bộ đầu vào.

Thời gian chờ là cần thiết vì nếu không, văn bản sẽ được chọn và sau đó không được chọn ngay lập tức, vì tôi đoán trình duyệt thực hiện kiểm tra định vị con trỏ.

Và cuối cùng, điều el = ev.currentTargetnày là cần thiết trong React vì React sử dụng lại các đối tượng sự kiện và bạn sẽ mất sự kiện tổng hợp vào thời điểm setTimeout kích hoạt.

Vấn đề với việc bắt sự kiện nhấp chuột là mỗi lần nhấp tiếp theo trong văn bản sẽ chọn lại lần nữa, trong khi người dùng có thể đang mong đợi định vị lại con trỏ.

Điều làm việc cho tôi là khai báo một biến, chọn SearchTextOnClick và đặt nó thành đúng theo mặc định. Trình xử lý nhấp chuột kiểm tra xem biến đó có còn đúng không: nếu đúng, nó đặt nó thành false và thực hiện select (). Sau đó tôi có một trình xử lý sự kiện mờ làm cho nó trở thành đúng.

Kết quả cho đến nay có vẻ như hành vi tôi mong đợi.

.

Câu hỏi này có các tùy chọn khi .select () không hoạt động trên nền tảng di động: Chọn lập trình văn bản trong trường nhập trên thiết bị iOS (Safari di động)

Html như thế này <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

và mã javascript không ràng buộc

function textSelector(ele){
    $(ele).select();
}

Vâng, đây là hoạt động bình thường cho một TextBox.

Nhấp 1 - Đặt tiêu điểm

Nhấp vào 2/3 (nhấp đúp chuột) - Chọn văn bản

Bạn có thể đặt tiêu điểm vào TextBox khi trang tải lần đầu tiên để giảm "chọn" thành một sự kiện nhấn đúp.

Sử dụng "giữ chỗ" thay vì "giá trị" trong trường đầu vào của bạn.

Nếu bạn đang sử dụng AngularJS, bạn có thể sử dụng một lệnh tùy chỉnh để dễ dàng truy cập:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Bây giờ người ta chỉ có thể sử dụng nó như thế này:

<input type="text" select-on-click ... />

Mẫu có các yêu cầu - vì vậy dòng đầu tiên và dòng cuối cùng có thể được bỏ qua nếu sử dụng một cái gì đó khác.

Nếu bất cứ ai muốn làm điều này trên trang tải w / jQuery (ngọt cho các trường tìm kiếm) thì đây là giải pháp của tôi

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Dựa trên bài đăng này . Cảm ơn CSS-Tricks.com

Nếu bạn chỉ đang cố gắng để có văn bản giữ chỗ được thay thế khi người dùng chọn thành phần thì rõ ràng cách tốt nhất là sử dụng placeholderthuộc tính hiện nay. Tuy nhiên, nếu bạn muốn chọn tất cả giá trị hiện tại khi một trường tăng trọng tâm thì sự kết hợp giữa các câu trả lời @Cory House và @Toastrackenigma dường như là hợp quy nhất. Sử dụng focusvàfocusout các sự kiện, với các trình xử lý thiết lập / giải phóng phần tử tiêu điểm hiện tại và chọn tất cả khi tập trung. Một ví dụ angular2 / typecript như sau (nhưng sẽ không quan trọng để chuyển đổi sang vanilla js):

Bản mẫu:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Thành phần:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};