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

添加您的输入框，其中包含默认值集，inactive类集和指向toggleText()函数的Javascript处理程序（如果您愿意，可以使用event listeners执行此操作）

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

Answer 4

或者只是

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

一旦清除该框，这将不会回发默认文本，但也允许用户清除该框并在自动完成脚本的情况下查看所有结果。

Answer 5

从可用性的角度来看，输入组件中的文本应仅保留用于用户的输入目的。如果用户不接触，输入中的可能默认值应该是有效的。

如果占位符文本是一个如何填充输入的提示，最好在输入附近进行操作，在填充输入时也可以看到它。此外，在文本组件中使用占位符文本可能会导致麻烦，例如用盲文设备。

如果使用占位符文本，无论可用性指南如何，都应确保以不引人注目的方式完成，以便在没有javascript或js关闭的情况下与用户代理一起使用。

Answer 6

我找到了jQuery插件（http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/）并使用它：）

Answer 7

我所做的是为现代浏览器添加一个占位符属性：

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

这适合我。

Answer 8

你可以使用这个插件（我是合着者）

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

克隆输入字段并将其放在那里。

适用于IE，Firefox，Chrome甚至iPhone Safari，它有着名的焦点问题。

这样您就不必担心在提交前清除输入字段。

OR

如果您只想要HTML5，可以在输入字段

上使用属性“占位符”

Answer 9

您可以使用占位符属性 NP。 <input type="text" name="fname" placeholder="First name">
检查http://www.w3schools.com/tags/att_input_placeholder.asp

输入时的默认文本

9 个答案: