Placeholder属性详解

一、placeholder属性的基本作用

1、placeholder可以在表单元素中显示一段提示文本，告诉用户该输入什么内容。

2、placeholder可以使页面更加简洁，不需要额外的标签和描述信息。

3、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、建议根据不同的表单元素设置不同的提示文本，以便用户更清晰地理解需要输入的内容。








五、placeholder属性的安全性
1、在一些敏感的场合，如支付信息输入等，建议不使用placeholder属性，使用label标签或其他合适的方式对表单元素进行描述。
2、因为placeholder属性中的文本可以被查看和修改，所以不要在placeholder中存放过多的敏感信息。


用户名



六、小结
1、placeholder属性可以在表单元素中显示一段提示文本，提高用户体验。
2、在不支持placeholder属性的浏览器中，需要通过JavaScript模拟实现placeholder效果。
3、可以通过CSS修改placeholder的样式，但需要注意浏览器的兼容性。
4、placeholder的提示文本应该具有语义化，以便用户更清晰地理解需要输入的内容。
5、在一些敏感的场合，建议不使用placeholder属性，使用label标签或其他合适的方式描述表单元素。