密码框的提示信息的显示问题

最新推荐文章于 2021-02-06 10:04:10 发布

二到家的小熊

最新推荐文章于 2021-02-06 10:04:10 发布

阅读量2.5k

点赞数 3

分类专栏： web前端文章标签：密码框提示信息

本文链接：https://blog.csdn.net/u012746051/article/details/50695952

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

今天工作中遇到一个这样的问题：我想给密码框一个‘请输入密码’的提示。想要的效果大概是这个样子：
这里写图片描述
可是如果把input的类型写成password（<input type='password' value='enter your password!' />）的话得到的效果就是这样的：

因为input的类型是password所以浏览器会自动把value值解析成‘圆点’。

这个时候有些朋友就会说了用placeholder不就解决了么，可是当我们要做到兼容IE7或更低的IE版本时placeholder就显得不是那么给力了。

怎么解决呢？这里有一个很巧妙的方法！
我们可以先把input的类型写成text（<input type='text' value='enter your password!' />）然后当input获得焦点时用<input type='password' />代替它！
具体的写法也很简单，几句简单的js代码就可以轻松搞定：

<body>
请输入密码：<input class="pwd" type="text" value="enter your password!" />
<script>
    var input = document.getElementsByClassName("pwd")[0];
    input.onfocus = function (){
        this.outerHTML = "<input type='password'/>";
    };
</script>
</body>