Văn bản mặc định khi nhập

Question

Cách đặt văn bản mặc định trống trên trường nhập và xóa văn bản khi phần tử đang hoạt động.

Answer 1

Trong trình duyệt hiện đại, bạn có thể đặt thuộc tính placeholder trên một trường để đặt văn bản mặc định của nó.

<input type="text" placeholder="Type some text" id="myField" /> 

Tuy nhiên, trong các trình duyệt cũ, bạn có thể sử dụng JavaScript để nắm bắt lấy nét và làm mờ các sự kiện:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling 
    if (elem.addEventListener) elem.addEventListener(type, fn, false); 
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn); 
}, 
textField = document.getElementById('myField'), 
placeholder = 'Type some text'; // The placeholder text 

addEvent(textField, 'focus', function() { 
    if (this.value === placeholder) this.value = ''; 
}); 
addEvent(textField, 'blur', function() { 
    if (this.value === '') this.value = placeholder; 
}); 

Demo: http://jsbin.com/utecu

Answer 2

Sử dụng onFocus và onBlur sự kiện cho phép bạn đạt được điều này , Tức là:

onfocus="if(this.value=='EGTEXT')this.value=''" 

và

onblur="if(this.value=='')this.value='EGTEXT'" 

Các ví dụ đầy đủ như sau:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" /> 

Answer 3

phong cách Declare cho tiểu bang không hoạt động và hoạt động:

.active { 
    color: black; 
} 

.inactive { 
    color: #909090; 
} 

Thêm Javascript để xử lý các thay đổi của nhà nước:

function toggleText(el) 
{ 
    var v = el.value; 

    //Remove text to allow editing 
    if(v=="Default text") { 
     el.value = ""; 
     el.className = "active"; 
    } 
    else { 
     //Remove whitespace 
     if(v.indexOf(" ")!=-1) { 
      split = v.split(" ").join(""); 
      v = split; 
     } 

      //Change to inactive state 
     if(v=="") { 
      el.value = "Default text"; 
      el.className = "inactive"; 
     } 
    } 
} 

Thêm inp của bạn ut hộp, với các thiết lập giá trị mặc định, tập inactive lớp và xử lý Javascript trỏ đến các toggleText() chức năng (bạn có thể sử dụng event listeners để làm điều này nếu bạn muốn)

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);"> 

Answer 4

Từ quan điểm khả năng sử dụng xem văn bản trong thành phần đầu vào chỉ nên được bảo toàn cho mục đích nhập của người dùng. Giá trị mặc định có thể có trong đầu vào phải hợp lệ nếu không bị người dùng chạm vào.

Nếu văn bản giữ chỗ có nghĩa là gợi ý về cách điền vào dữ liệu nhập, tốt hơn nên được đặt gần đầu vào, nơi nó cũng có thể được nhìn thấy khi đầu vào đã được lấp đầy. Hơn nữa, việc sử dụng văn bản trình giữ chỗ bên trong các thành phần văn bản có thể gây ra sự cố, ví dụ: với các thiết bị chữ nổi.

Nếu văn bản giữ chỗ được sử dụng, bất kể nguyên tắc về khả năng sử dụng, hãy đảm bảo rằng nó được thực hiện một cách kín đáo để nó hoạt động với tác nhân người dùng mà không cần javascript hoặc khi tắt js.

Answer 5

Tôi đã tìm thấy jQuery plugin (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) và sử dụng nó :)

Answer 6

Hoặc đơn giản là

<input name="example" type="text" id="example" value="Something" onfocus="value=''" /> 

này sẽ không gửi lại văn bản mặc định khi hộp được xóa nhưng cũng sẽ cho phép người dùng xóa hộp và xem tất cả kết quả trong trường hợp của tập lệnh tự động hoàn thành.

Answer 7

Bạn có thể sử dụng plugin này (Tôi là một đồng tác giả)

https://github.com/tanin47/jquery.default_text

Nó bắt chước một trường đầu vào và đặt nó ở đó.

Nó hoạt động trên IE, Firefox, Chrome và thậm chí cả iPhone Safari, trong đó có vấn đề tiêu điểm nổi tiếng.

Bằng cách này bạn không phải lo lắng về việc xóa trường nhập trước khi gửi.

HOẶC

Nếu bạn muốn HTML5 chỉ, bạn chỉ có thể sử dụng thuộc tính "giữ chỗ" trên lĩnh vực đầu vào

Answer 8

Bạn có thể sử dụng thuộc tính placeholder.
np. <input type="text" name="fname" placeholder="First name">
séc http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

Những gì tôi đã được đặt một thuộc tính giữ chỗ cho các trình duyệt hiện đại:

<input id='search' placeholder='Search' /> 

Sau đó, tôi đã thực hiện một dự phòng cho các trình duyệt cũ sử dụng JQuery:

var placeholder = $('search').attr('placeholder'); 
//Set the value 
$('search').val(placeholder); 

//On focus (when user clicks into the input) 
$('search').focus(function() { 
    if ($(this).val() == placeholder) 
    $(this).val(''); 
}); 

//If they focus out of the box (tab or click out) 
$('search').blur(function() { 
    if ($(this).val() == '') 
    $(this).val(placeholder); 
}); 

này làm việc cho tôi.