如何在输入字段上设置空白默认文本并在元素处于活动状态时将其清除。
【问题讨论】：
placeholder 作为类，并将默认文本放入title 属性中。 github.com/justinbangerter/placeholder.js
标签： javascript html textinput
在现代浏览器中，您可以在字段上设置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;
});
【讨论】：
使用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'" />
【讨论】：
或者干脆
<input name="example" type="text" id="example" value="Something" onfocus="value=''" />
一旦清除该框，这将不会回发默认文本，但也允许用户清除该框并在自动完成脚本的情况下查看所有结果。
【讨论】：
声明非活动和活动状态的样式：
.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";
}
}
}
添加您的输入框，设置默认值、inactive 类集和指向toggleText() 函数的Javascript 处理程序（如果您愿意，可以使用event listeners 来执行此操作）
<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">
【讨论】：
从可用性的角度来看，输入组件中的文本应仅保留用于用户输入目的。如果用户不触动，输入中可能的默认值应该是有效的。
如果占位符文本旨在提示如何填充输入，则最好将其放在输入附近，在输入已填充时也可以看到它。此外，在文本组件中使用占位符文本可能会导致麻烦，例如盲文设备。
如果使用占位符文本，无论可用性指南如何，都应确保它以一种不显眼的方式完成，以便它可以在没有 javascript 或 js 关闭时与用户代理一起使用。
【讨论】：
我找到了 jQuery 插件 (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) 并使用它:)
【讨论】：
我所做的是为现代浏览器放置一个占位符属性：
<input id='search' placeholder='Search' />
然后，我使用 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);
});
这对我有用。
【讨论】：
你可以使用这个插件（我是合著者）
https://github.com/tanin47/jquery.default_text
它克隆一个输入字段并将其放在那里。
它适用于 IE、Firefox、Chrome 甚至 iPhone Safari，它具有著名的焦点问题。
这样您就不必担心在提交之前清除输入字段。
或
如果你只想 HTML5，你可以在输入字段上使用属性“占位符”
【讨论】：
您可以使用占位符属性。
np。 <input type="text" name="fname" placeholder="First name">
检查http://www.w3schools.com/tags/att_input_placeholder.asp
【讨论】：