Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性,用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持,使用方式非常简单:
代码效果图片:html>
*{
padding: 0;
margin: 0;
}
#dd{
width: 300px;
height: 60px;
margin:100px auto;
}
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5SZjZGO2MGN1cDNwQjZhRWOjRTY0gzNkJGZ0IGNzkzNl9CX0JXZ252bj91Ztl2Lc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
placeholder 与 value 区别
placeholder可以用于密码内可见文字提示
value不可
处理密码输入框
如果需要处理 placeholder 的是个密码输入框,它的 value 值会显示为圆点之类的字符,呈现几个莫名其妙的圆点来作为 placeholder 提示恐怕不妥,因此需要特殊对待一下,将密码输入框拷贝一份出来然后修改其 type 属性为 'text' 来替代显示 placeholder,并把原本的密码输入框隐藏:$('input[placeholder]').on('blur', function() { var $this = $(this); var $replacement; if (this.value === '') { // 失去焦点时值为空则显示 placeholder
if (this.type === 'password') {
$replacement = $this.clone().attr('type', 'text');
$replacement.data('placeholder-password', $this); // 替代显示的文本输入框获取焦点时将它删掉,并且重新显示原来的密码输入框
$replacement.on('focus', function() {
$(this).data('placeholder-password').show().focus();
$(this).remove();
});
$this.after($replacement).hide();
$this = $replacement;
}
$this.addClass('placeholder');
$this[0].value = $this.attr('placeholder');
}});