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

Show placeholder instead of the default value in html form

本文关键字：默认值 占位符 显示 html 表单      更新时间：2023-09-26

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

根据您在这里所说的，听起来您实际上想要监听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

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

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

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

一方面，它是可行的；另一方面，我不知道你为什么要这样做。

$('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);
});
相关文章：