Các trường nhập văn bản Javascript hiển thị văn bản hướng dẫn (giữ chỗ)

Question

Cách tốt nhất để có trường nhập văn bản hiển thị hướng dẫn về những gì cần nhập vào trường đó bằng màu xám. Khi bạn tập trung vào trường nhập đó, văn bản lệnh màu xám sẽ biến mất và văn bản đầu vào của bạn sẽ xuất hiện màu đen. Nếu bạn xóa văn bản đầu vào của mình và lấy nét ra khỏi đầu vào đó, văn bản màu xám hướng dẫn sẽ xuất hiện trở lại.

Tôi đã thử triển khai thực hiện điều này với jQuery, nhưng tôi gặp phải tất cả các vấn đề lạ với các trình duyệt khác nhau. Đôi khi khi bạn quay trở lại màn hình, văn bản hướng dẫn trở thành màu đen và không còn biến mất nữa, các vấn đề như thế.

Có thư viện javascript chuẩn cho việc này không? Tôi không thể tìm thấy bất kỳ!

Ồ, và văn bản lệnh không thể là hình ảnh vì nó phải có sẵn bằng các ngôn ngữ khác nhau tùy thuộc vào tùy chọn ngôn ngữ của trình duyệt.

Answer 1

Bạn có thể sử dụng plugin watermark trong jquery.use this liên kết.

dụ

$(this).Watermark("your instructions"); 

Answer 2

<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''"> 

Answer 3

Làm cho đầu vào trong suốt và đặt văn bản phía sau nó. Kiểm tra giá trị onload, onblur để quyết định xem văn bản có được hiển thị hay không. Làm cho nó trở nên vô hình.

Ví dụ: http://dorward.me.uk/tmp/label-work/example.html (bạn chỉ cần tạo kiểu cho nhãn và đầu vào với màu sắc foreground khác nhau)

Answer 4

html

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox"> 

jQuery

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    });​ 
}); 

demo

Answer 5

Nhìn vào cái này: http://fuelyourcoding.com/scripts/infield/

Answer 6

Bạn không cần javascript cho việc này.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address"> 

này hoạt động trong các trình duyệt hiện đại. Nếu bạn thêm modernizr.js vào trang của mình thì nó sẽ hoạt động trong tất cả các trình duyệt.

Answer 7

placeholder mã - tên

tên của biến là,

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
}); 

DEMO LINK