1

我可以在输入元素中制作标签（我的“消失的文本”）：

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name"
 onfocus="if(this.value==this.defaultValue)this.value=''" 
 onblur="if(this.value=='')this.value=this.defaultValue" />

然后设置样式，使我消失的文本褪色（#333）。并设置它的样式，以便当我开始在字段中输入值时，文本为黑色（#000）。

CSS

input[type=text] {
    color: #333;
}
input[type=text]:focus {
    color: #000;
}

在您进入下一个输入字段之前，一切正常。然后，您刚刚输入值的字段将变回#333颜色。#000我可以明白为什么会发生这种情况，但是如果输入字段已放入值，则无法完全了解如何将值保持为黑色。

提前感谢您的帮助和教育！

4

2 回答 2

5

HTML5

<input>HTML5 为被调用的标签带来了一个方便的属性，该属性placeholder支持对这个功能的原生支持。

jsFiddle

<input type="text" placeholder="Search..." />

支持

所有最新的浏览器都支持这个，但是 IE9 及以下不支持。

<label>

请注意，占位符属性不是每个输入都应具有的<label>标签的替代品，请确保您包含标签，<input>即使它对用户不可见。

<label for="search">Search</label>
<input id="search" placeholder="Search..." />

上述<label>内容可以隐藏，因此仍可用于以下辅助技术：

label[for=search] {
    position:absolute;
    left:-9999px;
    top:-9999px;
}

跨浏览器解决方案

这是一个潜在的跨浏览器解决方案，我已将代码从标签移到脚本标签中，然后使用该类placeholder来指示何时淡化文本。

jsFiddle

HTML

<input name="firstName" type="text" maxlength="40" value="Enter your first name" 
    class="placeholder" id="my-input" />

CSS

input[type=text].placeholder {
    color: #999;
}

JS

<script type="text/javascript">
var input = document.getElementById('my-input');

input.onfocus = function () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
};
input.onblur = function() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
};
</script>

全部应用input[type=text]

我们可以将上述解决方案扩展为适用于所有人input[type=text]，方法是使用document.getElementsByTagName()、循环它们并检查type属性element.getAttribute()。

jsFiddle

var input = document.getElementsByTagName('input');

for (var i = 0; i < input.length; i++) {
    if (input[i].getAttribute('type') === 'text') {
        input[i].onfocus = inputOnfocus;
        input[i].onblur = inputOnblur;
    }
}
function inputOnfocus () {
    if (this.value == this.defaultValue && this.className == 'placeholder') {
        this.value = '';
    }
    this.className = '';
}
function inputOnblur() {
    if (this.value == '') {
        this.className = 'placeholder';
        this.value = this.defaultValue;
    }
}
于 2013-03-28T02:05:14.893 回答
1

这似乎使用 jQuery 和 Modernizer 库的组合来工作 xbrowser。

要求 jQuery 和 Modernizer 库在网站上并正确引用。

HTML

<head>
<script src="jquery-1.9.1.min.js"></script>
<script src="modernizr.js"></script>

<script>
$(document).ready(function(){

if(!Modernizr.input.placeholder){

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);
  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();
$('[placeholder]').parents('form').submit(function() {
  $(this).find('[placeholder]').each(function() {
    var input = $(this);
    if (input.val() == input.attr('placeholder')) {
      input.val('');
    }
  })
});

}
</script>
</head>

<body>
<form>
<input name="firstName" type="text" maxlength="40" placeholder="Enter your first name">
</form>

CSS

input[type=text] {
color: #000;
}

input[type=text].placeholder {
color: #666;
}

来源：http ://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text

于 2013-03-28T23:16:19.720 回答