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

时间：5年前阅读：6237

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

代码效果图片:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#dd{
				width: 300px;
				height: 60px;
				margin:100px auto;
				
			}

		</style>
	</head>
	<body>
		<div id="dd">

		<form name="search" method="post" action="http://www.nkysut.com/zb_system/cmd.php?act=search"><input type="text" name="q" size="11" placeholder="输入您要搜索的关键词" /> <input type="submit" value="搜索" /></form> 
	</div>
	</body>
</html>

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

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

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

网友评论