vấn đề với xử lý hình thức Chrome: onfocus input = "this.select()"

Question

Tôi đang sử dụng mã HTML sau đây để autoselect một số văn bản trong một trường mẫu khi người dùng nhấp vào sân:

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

Điều này làm việc tốt trong Firefox và Internet Explorer (mục đích là sử dụng văn bản mặc định để mô tả trường cho người dùng, nhưng đánh dấu nó để khi nhấp vào chúng chỉ có thể bắt đầu nhập), nhưng tôi đang gặp khó khăn khi làm việc đó Chrome. Khi tôi nhấp vào trường biểu mẫu trong Chrome, văn bản được đánh dấu chỉ trong một giây và sau đó con trỏ sẽ nhảy đến cuối văn bản mặc định và làm nổi bật phần đánh dấu.

Mọi ý tưởng về cách làm việc này cũng hoạt động trong Chrome?

Answer 1

Thay vì liên kết với sự kiện onfocus, bạn phải liên kết hành động này với sự kiện onclick và nó sẽ hoạt động như bạn muốn.

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search"> 

Answer 2

Nếu bạn thực sự vẫn gắn bó với onfocus, sau đó bạn sẽ cần phải thêm onmouseup="return false" quá.

Answer 3

Cách tôi thực hiện việc này là tạo một hàm bao bọc sử dụng setTimeout() để trì hoãn cuộc gọi thực tế đến select(). Sau đó, tôi chỉ gọi hàm đó trong sự kiện lấy nét của hộp văn bản. Việc sử dụng setTimeout sẽ thực hiện việc thực hiện cho đến khi ngăn xếp cuộc gọi trống, điều này sẽ xảy ra khi trình duyệt xử lý xong tất cả các sự kiện đã xảy ra khi bạn nhấp chuột (mousedown, mouseup, click, focus, vv). Đó là một chút của một hack, nhưng nó hoạt động.

function selectTextboxContent(textbox) 
{ 
    setTimeout(function() { textbox.select(); }, 10); 
} 

Sau đó, bạn có thể làm một cái gì đó như thế này để làm việc lựa chọn chế độ lấy nét:

<input onfocus="selectTextboxContent(this);" type="text" value="Search"> 

Answer 4

Xây dựng về câu trả lời của Jason, đây là một chức năng có thể thay thế "chọn" chức năng của các nút đầu vào DOM với một phiên bản cập nhật đã thời gian chờ xây dựng trong:

if (/chrome/i.test(navigator.userAgent)) { 
    HTMLInputElement.prototype.brokenSelectFunction = 
     HTMLInputElement.prototype.select; 

    HTMLInputElement.prototype.select = function() { 
     setTimeout(function(closureThis) { return function() { 
      closureThis.brokenSelectFunction(); 
     }; }(this), 10); 
    }; 
} 

về cơ bản, (trong Chrome chỉ) chúng ta chỉ cần đổi tên thành chức năng built-in nhưng chia chọn() để brokenSelectFunction() và sau đó bổ sung thêm một functio mới n cho tất cả các đầu vào được gọi là select() gọi hàm brokenSelectFunction() sau một sự chậm trễ. Bây giờ, chỉ cần gọi select() bình thường, vì chức năng chọn tích hợp đã được thay thế bằng hàm cố định với gợi ý trễ của Jason. Bằng cách này, bạn không phải lo lắng về việc thay đổi cuộc gọi hiện tại của mình để sử dụng chức năng trình bao bọc (và một khi điều này được giải quyết trong Chrome, bạn có thể chỉ cần loại bỏ phần trên và quay lại bình thường).

textbox.select(); // now runs select with setTimeout built-in (in Chrome only) 

Sửa: bạn có thể muốn thay đổi trận đấu user-agent từ "chrome" thành "webkit", như vấn đề này xảy ra trong tất cả các webkit-trình duyệt bao gồm Safari, và sửa chữa này sẽ làm việc cho bất kỳ chúng.

Answer 5

này hoạt động tốt nhất cho tôi ...

<input type="text" onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" /> 

Ngọn lửa sự kiện mouseup sau onfocus.

Answer 6

Chỉ cần sử dụng <input onmouseup=select()>. Điều đó hoạt động trong tất cả các trình duyệt.

Answer 7

Đây là giải pháp hoạt động trong Firefox, Chrome và IE, cả với tiêu điểm bàn phím và tiêu điểm chuột. Nó cũng xử lý nhấp chuột một cách chính xác sau khi tập trung (nó di chuyển dấu sót và không chọn lại văn bản):

<input 
onmousedown="this.clicked = 1;" 
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;" 
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;" 
> 

Với bàn phím lấy nét, chỉ onfocus trigger mà chọn văn bản do this.clicked không được thiết lập. Với tiêu điểm chuột, các kích hoạt onmousedown, sau đó onfocus và sau đó onclick chọn văn bản trong onclick nhưng không ở trong onfocus (Chrome yêu cầu điều này).

Lần nhấp chuột khi trường đã được tập trung không kích hoạt onfocus dẫn đến việc không chọn bất kỳ thứ gì.

Answer 8

onfocus="setTimeout(function(){select(this)})" 

hoặc onfocus="setTimeout(function(){select(this)},118)" cho Firefox.

Answer 9

Câu hỏi này đã được đăng cách đây năm năm, nhưng với HTML5, bạn có thể tạo tính năng này với thuộc tính trình giữ chỗ.

<input type="text" name="fname" placeholder="First name">