logo标签列表

输入框默认文本

javascripthtmltextinput
36

如何在输入字段上设置空白默认文本，并在元素被激活时清除它。

重复：https://dev59.com/QkjSa4cB1Zd3GeqPD0FN#1073514 - Quentin
我找到了jQuery插件（http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/）并使用它 :) - Jaro
这是一个老问题，但我写了一个非常轻量级的插件，因为我不喜欢其他的插件。你只需要包含它，在输入框中添加placeholder作为类，并将默认文本放在title属性中即可。https://github.com/justinbangerter/placeholder.js - jbangerter
9个回答
78

在现代浏览器中，您可以设置一个字段的 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

3
好的，这是HTML 5的一部分，可以在http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr-input-placeholder中找到关于"input placeholder"的信息。 - cic
14

使用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'" />
5
或者只需
<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

这样做不仅可以在清除文本框内容后避免重新提交默认文本，还可以让用户在自动完成脚本的情况下清除文本框并查看所有结果。
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处理程序（如果您希望可以使用事件监听器来完成此操作）

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">
3
从可用性的角度来看，输入组件中的文本应仅保留用于用户输入目的。如果用户未更改，则输入中的可能默认值应为有效值。
如果占位符文本用于提示如何填写输入，则最好将其放置在靠近输入的位置，即使在填充输入后也可以看到。此外，在文本组件中使用占位符文本可能会导致一些问题，例如使用盲文设备时。
如果使用占位符文本，无论遵循什么可用性指南，都应确保以不显眼的方式进行，以便它可以与没有JavaScript或已关闭js的用户代理一起使用。
1
我所做的是为现代浏览器添加了一个占位符属性：
<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);
});

这对我有效。
0

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

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

它克隆一个输入字段并将其放置在那里。
它适用于IE，Firefox，Chrome甚至iPhone Safari，后者有着著名的焦点问题。
这样，您就不必担心在提交之前清除输入字段。
或者
如果您只想使用HTML5，则可以在输入字段上使用属性“placeholder”。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接