如何在 <input> 元素内创建标签并设置样式？
Posted
技术标签:
【中文标题】如何在 <input> 元素内创建标签并设置样式？【英文标题】：How to create a label inside an <input> element and style it? 【发布时间】：2013-03-18 08:49:15 【问题描述】：我可以在输入元素中制作标签（我的“消失的文本”）：
<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 颜色。
提前感谢您的帮助和教育！
【问题讨论】：
【参考方案1】：HTML5
HTML5 为<input> 标签带来了一个方便的属性，称为placeholder，它支持对这个功能的原生支持。
jsFiddle
<input type="text" placeholder="Search..." />
支持
所有最新的浏览器都支持这个，IE9 and below don't however。
<label>
请注意，每个输入都应该有placeholder attribute is not a replacemenr for the <label> tag，确保包含<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]
我们可以通过使用document.getElementsByTagName() 来扩展上述解决方案以适用于所有input[type=text]，循环它们并使用element.getAttribute() 检查type 属性。
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;
【讨论】：
那不是只有 HTML5 吗？需要更向后兼容的东西 请注意placeholder is not a replacement for label。
差不多了 :-) JS 似乎只引用了一个特定的输入 ID。需要将此应用于所有 input[type=text] 元素，而不仅仅是 ID 引用的单个元素。谢谢。
更新后适用于input[type=text]。【参考方案2】：
这似乎可以在 xbrowser 中使用 jQuery 和 Modernizer 库的组合。
要求网站上有 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
【讨论】：
以上是关于如何在 <input> 元素内创建标签并设置样式？的主要内容，如果未能解决你的问题，请参考以下文章
如何控制 <input type="number"> 标签来创建选择元素？
如何从 index.html 自定义元素标签接收数组作为@Input？