html input密码显示为“*”
1. 功能需求：HTML中,在input password输入框中输入字符将默认显示为“实体圆点”，但这里要求将实体圆点字符替换成“*”号显示。
2. 局限：鼠标光标非IE浏览器不一定显示，选择多个字符时未有视觉上的区分，功能没有影响；不支持中文输入。
3. 实现：通过两个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>
html input密码显示为“*”的更多相关文章
- html input密码显示为*号
<!DOCTYPE html> <html encoding="utf-8"> <head> <style> *{margin:0; ...
- JS控制文本框中的密码显示/隐藏功能
<html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...
- VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...
- input密码框输入后设置显示为星号或其他样式
预览效果 核心代码 <div class="text-input" :class="right?'textinput-right':''"> < ...
- js点击 密码输入框密码显示隐藏
很多密码框都有个眼睛标记,点击能显示密码.原理就是点击切换password为text等显示 下面上代码 <!DOCTYPE html> <html> <head> ...
- input 密码框调出手机的数字键盘
对于某些密码,想要在手机上调出数字键盘,同时要隐藏文字.可结合type=tel和 text-security属性达到目的. input{ -webkit-text-security:disc; tex ...
随机推荐
- 解决curl中errno为51和60的错误
今天使用curl调用https接口的时候,发现接收不了数据 然后打印出curl_errno和curl_error发现是60错误,而生产环境是51错误 查了相关资料 加上两个参数就可以了 curl_se ...
- PHP验证码类
通过PHP的GD库图像处理内容,设计一个验证码类Vcode.将该类声明在文件vcode.class.php中,并通过面向对象的特性将一些实现的细节封装在该类中.只要在创建对象时,为构造方法提供三个参数 ...
- php 提交表单
滴答…滴答…的雨,欢迎大家光临我的博客. 学习是快乐的,教育是枯燥的. 博客园 首页 博问 闪存 联系 订阅 管理 随笔-58 评论-2017 文章-5 trackba ...
- do-while、while、for做循环算5的阶乘
#include "stdio.h" void main() { ,r=; do { r*=d; d++; }); printf("5的阶乘5!为:%d",r) ...
- Android 透明状态栏&着色状态栏
Android 5.0 及以上实现方式(android在5.0之后引入Material Design 实现方式相对简单) 透明状态栏,背景浸入状态栏 if (Build.VERSION.SDK_INT ...
- JSP 之国际化
导入 <%@ taglib url="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 创建三个语 ...
- git容易被忽略的准备工作命令
安装git命令 $ apt-get install git-core 配置用户信息 $ git config --global user.name "wxw" $ git conf ...
- ios随机数
ios 随机数生成 字数612 阅读3037 评论1 喜欢15 最近一直使用随机数,为了以后方便查阅,总结一下: 在C中提供了rand().srand().random().arc4random()几 ...
- VBS虚拟键码
1 VK_LBUTTON 鼠标左键 2 VK_RBUTTON 鼠标右键 3 VK_CANCEL Ctrl+Break(通常不需要处理) 4 VK_MBUTTON 鼠标中键 8 VK_BACK Back ...
- Windows 8/7下还原系统默认扩展名打开方式类型
在百度知道上如果你搜“改回选错的打开方式”,看到的大多数都是XP系统的方法,不管是批处理还是别的方法,但适用于Windows 8/7的只有修改注册表的方法. 因为Windows 7你也就根本找不到[工 ...