Javascript "hình mờ" cho hộp văn bản

Question

Tôi muốn biết cách đặt văn bản vào hộp văn bản khi tải trang. Ví dụ: Nếu tôi có trang đăng nhập, tôi sẽ có 2 hộp văn bản có tên là "tên người dùng" và "mật khẩu". Khi tải trang, tôi muốn hộp văn bản tải với "tên người dùng" được viết bên trong, vì vậy tôi sẽ không phải đặt nhãn cho bên ngoài. Nhưng khi người dùng nhấp vào bên trong hộp văn bản, nó sẽ bị xóa. Làm thế nào để tôi làm điều này?

Answer 1

<input name="q" onfocus="if (this.value=='search') this.value = ''" type="text" value="search"> 

... từ Stack Overflow hộp tìm kiếm.

---

Bạn cũng có thể thêm sự kiện onblur để kiểm tra: if (this.value=='') this.value = 'search'

này sẽ lại in hình mờ khi người dùng nhấp bên ngoài hộp văn bản và lĩnh vực này là trống.

Answer 2

Có rất nhiều hướng dẫn về cách thực hiện việc này. Here's one walkthrough bằng cách sử dụng khung javascript jQuery.

Đây là another popular blog post về việc đó, chỉ cần sử dụng javascript thông thường.

Answer 3

JS:

function clearDefault(ctl){ 
     if(ctl.value==ctl.defaultValue) { ctl.value = ""; } 
    } 

Trong textbox của bạn bao gồm onfocus="clearDefault(this)" và đặt văn bản của mình để "tên người dùng" hay "password".

Answer 4

Xem bài viết này http://www.alistapart.com/articles/makingcompactformsmoreaccessible. Tất nhiên, nếu bạn đang sử dụng jQuery, có các plugin "Gắn nhãn".

Answer 5

Về giáo dân của:

• Khi tập trung vào các đầu vào, nếu giá trị là "Tên đăng nhập", sau đó đặt nó là ""
• Khi tháo tập trung từ hộp, nếu giá trị là "" (tức là không có gì đã được nhập), thiết lập lại nó để "Tên đăng nhập" để vẫn cung cấp thông tin phản hồi cho người dùng kể từ khi họ chưa nhập dữ liệu

mã:

<input value="Username" onfocus="if(this.value=='Username') this.value = ''" onblur="if(this.value=='') this.value = 'Username'" type="text" /> 

Answer 6

Một cách hiện đại hơn là sử dụng "giữ chỗ"

<input type="text" placeholder="search" />