placeholder的使用

最新推荐文章于 2021-10-12 11:58:24 发布

转载最新推荐文章于 2021-10-12 11:58:24 发布 · 484 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/justSmile2/p/9519791.html

本文详细介绍了HTML中placeholder属性的作用及使用方法，包括如何设置输入框提示信息、CSS样式调整技巧以及低版本浏览器兼容方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义

placeholder 属性提供可描述输入字段预期值的提示信息

该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

2.用法

3.缩进

::-webkit-input-placeholder {
    text-indent: 4px;
}

:-ms-input-placeholder {
    text-indent: 4px;
}

::-moz-placeholder {
    text-indent: 4px; 
    opacity: 1!important;
}

input:focus::-webkit-input-placeholder {

color: #999;

border-color:#999;

}

4.低版本兼容

思路：

4.1 判断浏览器是否支持该元素

return 'placeholder' in document.createElement('input');

4.2 遍历文档所有带 placeholder 属性的 input

$(':input[placeholder]').each(function (index, element) {})

4.3 判断是否是 password 类型

return type.toLowerCase() === 'password';

4.4 针对每个匹配元素绑定事件 focus、blur、keydown...

总结：不同浏览器上展现效果不尽相同，模仿达到产品需求即可。



发现一个好玩的现象：
如果你把自己的表单放在一个白色背景下或者透明背景下，input设置为白色背景色和颜色，你会发现看起来聚焦不了了...

转载于:https://www.cnblogs.com/justSmile2/p/9519791.html