HTML | DOM 输入密码占位符属性

在HTML中，我们可以使用input标签用来接受用户的输入，其中type属性可以设置为password以隐藏密码的明文内容。此外，还可以使用placeholder属性来设置输入框的占位符，通常用于给用户提示输入的内容。

placeholder属性

placeholder属性用于在输入框中显示占位符，一般在输入框没有输入内容的情况下显示，输入内容时自动消失，为用户提供输入提示信息。格式为：

<input type="password" placeholder="请输入密码" />

支持情况

placeholder属性是HTML5新增的属性，在低版本的浏览器中可能不被支持。但大多数现代浏览器都支持该属性，包括IE10+、Chrome、Firefox、Safari等。

注意事项

在使用placeholder属性时，需要注意以下几点：

1. 对于某些浏览器（如IE9及更早版本、Safari、Android浏览器等），如果使用了placeholder属性但其值为空，那么输入框中将不会显示任何文字。因此，为了保证输入框始终有提示信息，我们应该提供一个非空的值作为placeholder属性的内容。

2. 需要注意的是，placeholder属性并不能作为表单验证的依据，必须通过其他方法（如Javascript）进行验证。

例如：

const passwordInput = document.getElementById('password');
const password = passwordInput.value;
if (password.length < 6) {
  alert('密码长度不能小于6位');
}

3. placeholder属性可以通过CSS进行样式修改，例如：

input::placeholder {
  color: #ccc;
}

总结

placeholder属性是HTML5新增的一项属性，用于在输入框中显示占位符，提供输入提示信息。使用时需要注意其兼容性和验证的问题。