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

Question

Tôi có 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 hiển thị trang, nội dung chứa Vui lòng nhập ID người dùng nhắn . 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ỉ bằng một lần nhấp không?

Edit:

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

Answer 1

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

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

Nhưng dường như nó không hoạt động trên Safari trên thiết bị 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" /> 

Answer 2

Đây là hoạt động bình thường đối với TextBox.

Bấm 1 - Đặt trọng tâm

Bấm 2/3 (double click) - Chọn văn bản

Bạn có thể thiết lập tập trung trên TextBox khi tải trang đầu tiên để giảm " chọn "cho một sự kiện nhấp đúp duy nhất.

Answer 3

Dưới đây là một phiên bản thể tái sử dụng của câu trả lời Shoban của:

<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ể tái sử dụng các kịch bản rõ ràng cho nhiều yếu tố.

Answer 4

Html (bạn sẽ phải đặt thuộc tính onclick trên tất cả các đầu vào bạn muốn nó làm việc cho trên trang)

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

HOẶC Một lựa chọn tốt hơn

jQuery (điều này sẽ làm việc cho mỗi đầu vào văn bản trên trang, không cần phải 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> 

Answer 5

Hãy thử:

0.123.

onclick="this.select()" 

Nó hoạt động tuyệt vời cho tôi.

Answer 6

Tôi biết điều này là cũ, nhưng lựa chọn tốt nhất là đến nay sử dụng thuộc tính placeholder 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ẽ làm cho văn bản hiển thị trừ khi một giá trị được nhập vào, loại bỏ sự cần thiết phải chọn văn bản hoặc đầu vào rõ ràng.

Answer 7

Thật vậy, hãy sử dụng onclick="this.select();" nhưng hãy 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 bấm đa để chọn, vẫn cò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.

Answer 8

Sự cố khi 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ể mong muốn định vị lại con trỏ.

Điều gì làm việc cho tôi đã tuyên bố biến, chọnSearchTextOnClick và đặt thành true theo mặc định. Trình xử lý nhấp chuột kiểm tra xem biến đó có đúng hay không: nếu đúng, nó đặt thành false và thực hiện select(). Sau đó tôi có một trình xử lý sự kiện mờ mà đặt nó trở lại thành sự thật.

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

(Chỉnh sửa: Tôi bỏ qua để nói rằng tôi đã cố gắng bắt sự kiện trọng tâm như ai đó đề xuất, nhưng điều đó không hiệu quả: sau khi sự kiện tập trung kích hoạt, sự kiện nhấp có thể kích hoạt, ngay lập tức bỏ chọn văn bản).

Answer 9

Các giải pháp được đăng trước đây có hai tật:

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

Đây là 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 tiêu điểm.

 $(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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting. 
      }); 
     }); 

Answer 10

Câu hỏi này có các tùy chọn cho khi .Chọn() không được làm việc trên nền tảng di động: Programmatically selecting text in an input field on iOS devices (mobile Safari)

Answer 11

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

Answer 12

Nếu bạn đang sử dụng AngularJS, bạn có thể sử dụng một chỉ thị 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 là với requirejs - vì vậy đầu tiên và dòng cuối cùng có thể được bỏ qua nếu sử dụng cái gì khác.

Answer 13

Nếu bất cứ ai muốn làm điều này trên tải trang w/jQuery (ngọt cho các lĩnh vực tìm kiếm) đâ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 this đường bưu điện. Nhờ CSS-Tricks.com

Answer 14

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

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

• trình cho tất cả các trình duyệt hỗ trợ JQuery, Safari, Chrome, IE, Firefox, vv
• trình cho PhoneGap/Cordova: Android và iOS.
• Chỉ chọn tất cả một lần sau khi nhập được lấy nét cho đến khi làm mờ tiếp theo và sau đó lấy nét
• Có thể sử dụng nhiều đầu vào và không bị trục trặc.
• chỉ thị góc có lớn tái sử dụng chỉ cần thêm chỉ thị chọn-tất cả-on-click
• JQuery có thể được sửa đổi một cách 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: 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; 
     }); 
    } 
    }; 
}]); 

Answer 15

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

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

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

Answer 16

Bạn luôn có thể sử dụng document.execCommand (supported in all major browsers)

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

Chọn tất cả văn bản trong các yếu tố hiện tập trung.

Answer 17

đầu vào tự động lấy nét, với sự kiện onfocus:

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

này cho phép bạn mở một hình thức với các phần tử mong muốn lựa 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 onfocus, mà lần lượt chọn văn bản.

Answer 18

Các giải pháp chính xác với những gì bạn hỏi 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" như một giữ chỗ hoặc gợi ý trong đầu vào. Vì vậy, bạn có thể sử dụng sau đây 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" /> 

Answer 19

Nếu bạn đang cố gắng để có văn bản giữ chỗ mà được thay thế khi người dùng lựa chọn các phần tử sau đó nó rõ ràng là thực hành tốt nhất để sử dụng placeholder thuộc tính ngày nay . Tuy nhiên, nếu bạn muốn chọn tất cả giá trị hiện tại khi trường tăng tiêu điểm thì sự kết hợp của câu trả lời @Cory House và @Toastrackenigma có vẻ hợp lý nhất. Sử dụng các sự kiện focus và focusout, với 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 được lấy nét.Một angular2/example nguyên cảo là như sau (nhưng sẽ là tầm thường để chuyển đổi sang vani js):

mẫu:

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

Component:

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