輸入上的默認文本

Question

如何在輸入字段上設置空白默認文本並在元素處於活動狀態時將其清除。

Answer 1

在現代瀏覽器中，您可以在字段上設置placeholder屬性以設置其默認文本。

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

然而，在舊的瀏覽器，你可以使用JavaScript來捕獲的重點和模糊事件：

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; 
}); 

演示：http://jsbin.com/utecu

Answer 2

使用onFocus和onBlur事件讓你實現這個，即：

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

和

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

完整的示例如下：

<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

爲無效和有效狀態申報方式：

.active { 
    color: black; 
} 

.inactive { 
    color: #909090; 
} 

添加JavaScript的處理狀態的變化：

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"; 
     } 
    } 
} 

添加您的inp UT框，默認值而定，inactive類集和Javascript處理程序指向toggleText()功能（你可以使用event listeners要做到這一點，如果你願意的話）

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

Answer 4

從視圖中的文本可用性點輸入組件應僅保留用於用戶的輸入目的。如果用戶不觸摸，輸入中可能的默認值應該是有效的。

如果佔位符文本的目的是爲了提示如何填充輸入，最好在輸入附近對其進行填充，以便在填充輸入時也可以看到它。此外，在文本組件中使用佔位符文本會造成麻煩，例如配有盲文設備。

如果使用佔位符文本，不管可用性指南如何，應確保它以不顯眼的方式完成，以便它可以在沒有javascript的用戶代理或js關閉的情況下使用。

Answer 5

我發現jQuery插件（http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/），並用它:)

Answer 6

或者乾脆

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

一旦箱子被清除這不會回發的默認文本也將允許用戶清除該框並在自動完成腳本的情況下查看所有結果。

Answer 7

你可以使用這個插件（我的合着者）

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

其複製的輸入字段，並把它放在那裏。

它適用於IE，Firefox，Chrome甚至iPhone Safari，它有着名的焦點問題。

這樣您就不必擔心在提交前清除輸入字段。

OR

如果你想HTML5而已，你可以用屬性「佔位符」上輸入字段

Answer 8

您可以使用佔位符屬性。
np。 <input type="text" name="fname" placeholder="First name">
檢查http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

我所做的是把一個佔位符屬性爲現代瀏覽器：

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); 
}); 

這適用於：

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

然後，使用JQuery我做舊的瀏覽器回退我。