1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html value一点就消失 input输入框内文字消失用value和placeholder有什么区别

html value一点就消失 input输入框内文字消失用value和placeholder有什么区别

时间:2018-12-19 21:29:04

相关推荐

html value一点就消失 input输入框内文字消失用value和placeholder有什么区别

Placeholder(占位符) 是 HTML5 新增的一个 HTML 属性,用来对可输入字段的期望值提供提示信息,目前已经得到主流浏览器的广泛支持,使用方式非常简单:

代码效果图片:html>

*{

padding:0;

margin:0;

}

#dd{

width:300px;

height:60px;

margin:100pxauto;

}

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');

}});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。