密码输入框显示为文字

来源：互联网发布：程序员改bug 编辑：程序博客网时间：2024/05/17 23:54

表单中type设置为password时，密码框的value值显示*。现有两种方案解决这个问题。

    <form action="" method="get">        <input type="text" value="请输入账号"/>        <input type="password" value="请输入密码" />    </form>

这里写图片描述

1.

H5 中给了placeholder占位符属性，

定义
占位符属性指定一个描述输入字段的期望值的简短提示（例如，样本值或预期格式的简短描述）。在用户输入值之前，输入字段中显示短提示。
注意：占位符属性适用于以下输入类型：文本，搜索，URL，电话，电子邮件和密码。

用法：

<form >  <input type="text" name="fname" placeholder="First name"><br>  <input type="text" name="lname" placeholder="Last name"><br>  <input type="submit" value="Submit"></form>

2.

在javascript中可以有两种方式解决

opacity:1;
display：none

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!-- <meta name="viewport" content="width=device-width, initial-scale=">    <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->    <title>Document</title>    <style>        .pwd {            margin-top: 20px;            margin-left: 40px;            border: 1px solid #dcdcdc;            width: 348px;            height: 40px;            line-height: 40px;            overflow: hidden;        }        .pwd input {            color: #cccccc;            width: 289px;            border: 0;            line-height: 40px;            float: left;            font-size: 30px;        }        #pwdtext {            outline: none;            color: #000000;            display: none;        }    </style></head><body>    <div class="pwd">        <input type="password" name="pwd" id="pwdtext" onblur="hidePwd(this);" />        <input type="text" id="pwdshow" value="Password" onfocus="hidePwd(this);" />    </div></body><script>    function hidePwd(obj) {        obj.style.display = "none";        if (obj.type == "text") {            document.getElementById('pwdtext').style.display = "block";            document.getElementById('pwdtext').focus();        } else {            if (obj.value == "")                document.getElementById('pwdshow').style.display = "block";            else {                obj.style.display = "block";            }        }    }</script></html>

阅读全文

0 0