输入上的默认文本

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我做旧的浏览器回退我。