col*_*rco 41 html forms label placeholder
我想在输入元素中插入一个描述性文本,当用户点击它时,该元素会消失.
我知道这是一个非常常见的技巧,但我不知道该怎么做..
什么是最简单/更好的解决方案？
Ric*_*haw 118
如果您使用的是HTML5,则可以使用该placeholder属性.
<input type="text" name="user" placeholder="Username">
Cor*_*ker 45
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
一个更好的例子是SO搜索按钮!这就是我从中获取此代码的地方.查看页面源是一个有价值的工具.
Tex*_*Tex 37
在我看来,最好的解决方案既不涉及图像也不涉及输入的默认值.相反,它看起来像David Dorward的解决方案.
对于没有javascript的屏幕阅读器和用户来说,它很容易实现和降级.
看看这里的两个例子:http: //attardi.org/labels/
我通常在表单上使用第二种方法(labels2).
常用方法是使用默认值作为标签，然后在字段获得焦点时将其删除。
我真的不喜欢这种方法，因为它涉及可访问性和可用性。
相反，我将从在字段旁边使用标准元素开始。
然后，如果JavaScript是活动的，则在祖先元素上设置一个类，这会导致一些新样式应用该类：
然后，每当输入失去焦点时，我都会进行测试以查看输入是否具有值。如果存在，请确保祖先元素具有类（例如“ hide-label”），否则请确保其不具有该类。
只要输入获得焦点，就设置该类别。
样式表将在选择器中使用该类名来隐藏标签（通常使用text-indent：-9999px）。
这种方法为所有用户（包括禁用了JS的用户和使用屏幕阅读器的用户）提供了体面的体验。
小智 5
我将@Cory Walker 提出的解决方案与@Rafael 的扩展放在一起，而@Tex 女巫的单一形式对我来说有点复杂，并提出了一个希望能够实现的解决方案
禁用 javascript 和 CSS 时防错。
它使用表单字段的背景颜色来显示/隐藏标签。
<head>
<style type="text/css">
<!--
input {position:relative;background:transparent;}
-->
</style>
<script>
function labelPosition() {
document.getElementById("name").style.position="absolute";
// label is moved behind the textfield using the script,
// so it doesnt apply when javascript disabled
}
</script>
</head>
<body onload="labelPosition()">
<form>
<label id="name">Your name</label>
<input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>
</body>
查看正在运行的脚本： http: //mattr.co.uk/work/form_label.html
| 归档时间： |
|
| 查看次数： |
179973 次 |
| 最近记录： |