一、placeholder属性的基本作用
1、placeholder可以在表单元素中显示一段提示文本,告诉用户该输入什么内容。
2、placeholder可以使页面更加简洁,不需要额外的标签和描述信息。
3、placeholder可以在用户输入内容后自动消失,不会占用输入空间,提高用户体验。
<input type="text" placeholder="请输入用户名">
二、placeholder属性的兼容性
1、HTML5支持placeholder属性,但是在IE浏览器下不支持。
2、IE9以下的浏览器可以通过JavaScript模拟实现placeholder的效果。
3、对于不支持placeholder属性的浏览器,在表单元素获得焦点和失去焦点时,需要手动判断并设置提示文本的显示和隐藏。
var input = document.getElementById("username");
if (!("placeholder" in document.createElement("input"))) {
input.onfocus = function() {
if (input.value == this.placeholder) {
input.value = "";
}
input.style.color = "#333";
}
input.onblur = function() {
if (input.value == "") {
input.value = this.placeholder;
input.style.color = "#999";
}
}
}
三、placeholder属性的样式修改
1、可以通过CSS修改placeholder的颜色、字体等样式。
2、修改placeholder的样式需要注意浏览器的兼容性,如某些浏览器只允许修改颜色,而某些浏览器支持更多的样式修改。
::placeholder {
color: #999;
font-size: 14px;
}
/*针对IE和Edge的特殊样式*/
::-ms-input-placeholder {
color: #999;
}
四、placeholder属性的语义化
1、placeholder的提示文本应当具有语义化,避免使用无意义的文本。
2、建议根据不同的表单元素设置不同的提示文本,以便用户更清晰地理解需要输入的内容。
<input type="tel" placeholder="请输入手机号码">
<input type="email" placeholder="请输入邮箱地址">
<input type="password" placeholder="请输入密码">
<input type="search" placeholder="请输入搜索内容">
五、placeholder属性的安全性
1、在一些敏感的场合,如支付信息输入等,建议不使用placeholder属性,使用label标签或其他合适的方式对表单元素进行描述。
2、因为placeholder属性中的文本可以被查看和修改,所以不要在placeholder中存放过多的敏感信息。
<label for="username">用户名</label>
<input type="text" id="username">
六、小结
1、placeholder属性可以在表单元素中显示一段提示文本,提高用户体验。
2、在不支持placeholder属性的浏览器中,需要通过JavaScript模拟实现placeholder效果。
3、可以通过CSS修改placeholder的样式,但需要注意浏览器的兼容性。
4、placeholder的提示文本应该具有语义化,以便用户更清晰地理解需要输入的内容。
5、在一些敏感的场合,建议不使用placeholder属性,使用label标签或其他合适的方式描述表单元素。