Làm cách nào để nhận các giá trị biểu mẫu biến mất khi tôi nhập trường?

Question

Tôi đang tạo một biểu mẫu đơn giản với khoảng tám trường nhập. Tôi muốn giá trị ban đầu trong trường để cho biết những gì mọi người được cho là nhập. Ví dụ giá trị = "tên" để mọi người biết nhập tên đó ở đó.

Câu hỏi của tôi là làm thế nào để bạn có được giá trị ban đầu biến mất khi họ nhập trường đó để giá trị ban đầu chỉ là gợi ý chứ không phải giá trị vĩnh viễn mà họ phải xóa trước khi họ có thể nhập tên của họ?

Cảm ơn!

Answer 1

Đặt giá trị 'mặc định' thành "Tên". Sau đó, sử dụng javascript và sự kiện 'onfocus', xóa trường.

Vì vậy, bạn sẽ có:

<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/> 

Answer 2

Basic javascript:

<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' /> 

Answer 3

Đây là cách bạn nên làm điều đó.

<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;"> 

Nếu họ nhấp vào đó và nhấp vào giá trị mặc định sẽ quay lại. Nếu họ nhấp vào nó và gõ một cái gì đó vào, nó sẽ không cố gắng để xóa những gì họ đặt nếu họ quay trở lại bấm vào nó một lần nữa.

Answer 4

Một cách dễ dàng hơn nhiều khả năng có thể là:

placeholder="Name" 

Answer 5

Just for S & của G Tôi nghĩ tôi sẽ gửi một giải pháp jQuery tái sử dụng cho vấn đề này.

var formDefaulter=function(){ 
    //Class to hold each form element 
    var FormElement=function(element){ 
     var that=this; 
     this.element=element; 

     var initialVal=this.element.val(); 
     var isEdited=false; 

     this.element.focus(function(){clearBox()}); 
     this.element.blur(function(){fillBox()}); 

     var clearBox=function(){ 
      if(!isEdited){ 
       that.element.val(""); 
       isEdited=true; 
      } 
     } 
     var fillBox=function(){ 
      if(that.element.val()==""){ 
       that.element.val(initialVal); 
       isEdited=false; 
      } 
     } 
    } 

    var add=function(elementId){ 
     new FormElement($('#'+elementId)); 
    } 

    return{ 
     add:add 
    } 
}(); 

Sau đó, bạn chỉ cần đính kèm từng phần tử bằng giá trị thuộc tính ID. Giống như vậy:

$(function(){ 
    formDefaulter.add('contact_name'); 
    formDefaulter.add('contact_email'); 
    formDefaulter.add('contact_msg'); 
}); 

Điều này cũng nạp phần tử biểu mẫu với giá trị ban đầu nếu nội dung của nó bị xóa. Dù sao, hy vọng điều này là hữu ích cho một ai đó.