html input密码显示为*号

最新推荐文章于 2025-06-22 16:54:58 发布

猿者上钩

最新推荐文章于 2025-06-22 16:54:58 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_28671617/article/details/88404815

本文介绍了一种使用HTML和JavaScript实现密码输入框中字符显示为星号(*)的方法。通过两个叠加的输入框，一个用于实际输入，另一个用于显示星号，以此达到密码保护的效果。

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

html input密码显示为*号

<!DOCTYPE html>  
<html encoding="utf-8">  
<head>  
    <style>  
    *{margin:0;padding:0}  
    input{font:14px Monospace;height:20px;width:160px;}  
    label{display:inline-block;width:100px;height:20px;}  
    #pass{position:absolute;left:100px;top:0;opacity:0;filter:alpha(opacity=0);z-index:2;}  
    form{position:relative;}  
    #hint_pass{position:absolute;left:100px;}  
    </style>  
</head>  
<body>  
    <form>  
        <label>Password:</label>  
        <input type="text" id="hint_pass" maxlength="20" tabindex="-1" />  
        <input type="text" id="pass" name="pass" maxlength="20" />  
    </form>     
<script>  
    var pass=document.getElementById('pass');  
    var hint_pass=document.getElementById('hint_pass');  
    pass.onkeyup=pass.onchange=function(){hint_pass.value=pass.value.replace(/./g,'*');};  
</script>   
</body>  
</html>