在html表单中显示占位符而不是默认值答案

【问题标题】：Show placeholder instead of the default value in html form在html表单中显示占位符而不是默认值
【发布时间】：2013-07-21 22:34:41
【问题描述】：

html表单中的文本字段有一个默认值，但我想显示占位符而不是默认值。有什么想法吗？

【问题讨论】：

占位符（HTML5 版本或脚本扩展）在输入控件没有值时可见。
字段将始终有一个值，在创建文本字段时分配一个值 - 它是一个编辑表单。

标签： javascript html twitter-bootstrap forms

【解决方案1】：

如果您只关心支持 HTML5 的浏览器，以下是一个选项：

<input type="text" name="myText" placeholder="My Placeholder">

【讨论】：

如果你关心旧版浏览器，网络上有一些关于 polyfills here 和 here 的好建议。这些将在旧浏览器中添加对您的标记的零/最小更改的支持。

【解决方案2】：

一方面是可行的；另一方面，我不确定你为什么应该这样做。

$('input[type="text"]').each(function (i, o) {
    var inputBox = $(o),
        swapInValue = function () {
            inputBox.val(inputBox.data('val'));
        },
        swapOutValue = function () {
            inputBox.data('val', inputBox.val()).val('');
        };
    inputBox.blur(swapOutValue).focus(swapInValue);
});

【讨论】：

这样做是因为我喜欢这样一个事实，即使用占位符用户可以开始输入新值。而不是先选择和删除以前的值。对不起，我就是这样的强迫症！让我试试你的代码..
是的，使用占位符，用户可以开始输入新值。但是，即使文本框已有值，您也要求强制显示占位符。
是的，因此我将“占位符”设置为“值”

【解决方案3】：

从您所说的here 看来，您实际上想监听 focus 和 blur 事件，并且只需使用一些清除 <input> 的内容如果没有输入任何内容，可以使用一种缓存来恢复它。

<input id="foo" type="text" value="" data-value="" />

然后在脚本中

var foo = document.getElementById('foo');
foo.addEventListener('focus', function () {
    this.setAttribute('data-value', this.value);
    this.value = '';
});
foo.addEventListener('blur', function () {
    if (this.value === '')
        this.value = this.getAttribute('data-value');
});

DEMO

【讨论】：

【解决方案4】：

<input type="text" name="foo"  placeholder="Foo Name"/>
<input type="hidden" name="foo" value="foo"/>

【讨论】：