Làm cách nào để tập trung lại vào trường văn bản khi tiêu điểm bị mất trên biểu mẫu HTML?

Question

Chỉ có một trường văn bản trên biểu mẫu HTML. Người dùng nhập một số văn bản, nhấn Enter, gửi biểu mẫu và biểu mẫu được tải lại. Việc sử dụng chính là đọc mã vạch. Tôi sử dụng mã sau để đặt trọng tâm cho trường văn bản:

<script language="javascript"> 
    <!-- 
      document.getElementById("#{id}").focus() 
    //--> 
</script> 

Thường xuyên hoạt động (nếu không chạm vào màn hình/chuột/bàn phím).

Tuy nhiên, khi người dùng nhấp vào một nơi nào đó bên ngoài trường trong cửa sổ trình duyệt (khoảng trắng trống), con trỏ sẽ biến mất. Một dạng HTML đơn trường, làm cách nào để ngăn con trỏ bị mất? Hoặc, làm thế nào để tập trung lại con trỏ bên trong trường sau khi con trỏ bị mất? cám ơn!

Answer 1

câu trả lời Darin là đúng, nhưng không hoạt động trong Firefox. Nếu bạn muốn ăn cắp tập trung trở lại trong Firefox cũng vậy, bạn phải trì hoãn nó cho đến sau sự kiện:

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);"> 

Hoặc, tốt hơn, giao từ JavaScript:

<script type="text/javascript"> 
    var element= document.getElementById('foo'); 
    element.focus(); 
    element.onblur= function() { 
     setTimeout(function() { 
      element.focus(); 
     }, 0); 
    }; 
</script> 

Nhưng, Tôi mạnh mẽ sẽ tư vấn cho bạn không làm điều này. Nhấp vào bên ngoài hộp văn bản để xóa tiêu điểm khỏi hộp văn bản đó là hành vi trình duyệt hoàn toàn bình thường, có thể sử dụng hợp pháp (ví dụ: để đặt điểm tìm kiếm cho ctrl-F hoặc bắt đầu chọn kéo, v.v ...). Có rất ít khả năng là một lý do tốt để gây rối với hành vi mong đợi này.

Answer 2

Bạn có thể móc sự kiện blur và lấy lại trường một lần nữa. Có rất ít trường hợp sử dụng để làm điều này, nhưng có vẻ như bạn có thể là một trong số họ. Lưu ý rằng có thể bạn sẽ phải lên lịch lấy nét lại thông qua setTimeout hoặc tương tự, bạn sẽ không thể thực hiện điều đó trong chính trình xử lý blur.

Khi làm điều này mà không ảnh hưởng đến đánh dấu, đây là đơn giản nhất nếu bạn sử dụng một thư viện như Prototype, jQuery, Closure, vv, nhưng bạn có thể làm điều đó mà không có họ (tất nhiên), bạn chỉ cần có để xử lý chênh lệch trình duyệt mình . Ví dụ: sử dụng Prototype:

document.observe("dom:loaded", function() { 
    var elm = $('thingy'); 

    elm.focus(); 
    elm.observe('blur', function() { 
     refocus.defer(elm); 
    }); 

    function refocus(elm) { 
     elm.focus(); 
    } 
}); 

Nếu bạn không bận tâm đến việc đánh dấu, bạn có thể sử dụng thuộc tính onblur. Ví dụ, điều này hoạt động trên IE, Firefox và Chrome ít nhất (có thể là những người khác):

HTML:

<input type='text' id='thingy' onblur="refocus(this);"> 

Script:

function refocus(elm) { 

    setTimeout(go, 0); 

    function go() { 
     elm.focus(); 
    } 
} 

Answer 3

<input type="text" name="barcode" onblur="this.focus();" />