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密码显示为“*”的更多相关文章

  1. html input密码显示为*号

    <!DOCTYPE html> <html encoding="utf-8"> <head> <style> *{margin:0; ...

  2. JS控制文本框中的密码显示/隐藏功能

    <html> <head> <title>[荐]JS控制文本框中的密码显示/隐藏功能_网页代码站(www.6a8a.com)</title> <s ...

  3. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  5. jQuery Tags Input 插件显示选择记录

    利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...

  6. （转）基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

    http://www.cnblogs.com/wuhuacong/p/3667703.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  7. input密码框输入后设置显示为星号或其他样式

    预览效果 核心代码 <div class="text-input" :class="right?'textinput-right':''"> < ...

  8. js点击 密码输入框密码显示隐藏

    很多密码框都有个眼睛标记,点击能显示密码.原理就是点击切换password为text等显示 下面上代码 <!DOCTYPE html> <html> <head> ...

  9. input 密码框调出手机的数字键盘

    对于某些密码,想要在手机上调出数字键盘,同时要隐藏文字.可结合type=tel和 text-security属性达到目的. input{ -webkit-text-security:disc; tex ...

随机推荐

  1. 华为配置SSH登陆详细步骤

    理解下SSH登录的过程: 1.建立目的端口为22的TCP连接 2.协商SSH版本 3.协商密钥和算法 4.会话建立 下面为server端的详细配置步骤: 1.创建本地RSA密钥对 rsa local- ...

  2. C++设计模式-参考资料

    设计模式实例讲解: http://www.cnblogs.com/jiese/tag/ http://www.cnblogs.com/wanggary/category/294620.html 设计模 ...

  3. CVE-2014-4115漏洞分析(2014.11)

    CVE-2014-4115漏洞分析 一.简介 该漏洞是由于Windows的Fastfat.sys组件在处理FAT32格式的硬盘分区存在问题.攻击者利用成功可导致权限提升. 影响的系统包括: Windo ...

  4. sqlserver 按日、周、月统计方法

    摘自于网络网络:http://blog.csdn.net/wanmdb/article/details/8080636 create table T(日期时间 datetime, 数量 int) in ...

  5. Thrift源码解析--TBinaryProtocol

    本文为原创,未经许可禁止转载. 关于Tprotocol层都是一些通信协议,个人感觉内容较大,很难分类描述清楚.故打算以TBinaryProtocol为例,分析客户端发请求以及接收服务端返回数据的整个过 ...

  6. PHP实现中文截取无乱码

    字符串的处理是编程中比较常见的,各种编程语言对字符串的处理也提供了大量函数,像php中mb_substr()函数可以实现对中文字符串的截取,如何使用自定义方法实现中文字符串截取无乱码这也是面试经常遇到 ...

  7. VBS基础篇 - VBScript过程

    VBS基础篇 - VBScript过程   在 VBScript 中,过程被分为两类:Sub 过程和 Function 过程. Sub过程 Sub 过程是包含在 Sub 和 End Sub 语句之间的 ...

  8. python unitest基本

    基本 import unittest class OneTest(unittest.TestCase): def setUp(self): self.verificationErrors = [] s ...

  9. HDU2502:月之数

    Problem Description 当寒月还在读大一的时候,他在一本武林秘籍中(据后来考证,估计是计算机基础,狂汗-ing),发现了神奇的二进制数. 如果一个正整数m表示成二进制,它的位数为n(不 ...

  10. servlet第3讲(上集)----同一用户的不同页面共享数据

    1.方法综述 2.Cookie 3.sendRedict()方法     4.隐藏表单