揭秘Chroma-Hash让密码输入框拥有彩色指纹的jQuery神器盲打也能一次成功【免费下载链接】Chroma-HashA colorful visualization of password field input项目地址: https://gitcode.com/gh_mirrors/ch/Chroma-HashChroma-Hash是一款开源的jQuery 插件它为网页的密码输入框添加一组随输入实时变化的彩色色条——相当于给每次输入生成一枚彩色指纹。密码虽被•遮罩但凭色条就能瞬间判断密码是不是输对了不用再点登录碰运气。它基于 MD5 哈希计算颜色图案不可逆旁人无法从颜色反推出你的密码。 痛点密码输错了只有点登录才知道网页的安全输入框会用••••遮住你敲的字符这是好事但带来一个尴尬的体验密码再长再复杂输入过程全程盲打少敲一个字母、大小写搞反都无法察觉只能点登录→ 提示错误 → 清空重来循环往复。Chroma-Hash 的思路很巧妙不显示密码本身只显示密码的色彩指纹。输入内容对色条就对输错一个字符色条立刻换了一套配色。 它是怎么做到安全又好看的核心逻辑在jquery.chroma-hash.js中工作过程分四步监听输入插件绑定keyup和blur事件你每敲一下字符就触发一次计算哈希输入把输入内容加上一个盐值salt计算 MD5 摘要截取颜色从哈希结果中取出若干 6 位十六进制色值作为色条颜色渲染色条在输入框右端渲染 1~4 条竖色条并用 CSS3 过渡动画平滑变色。其中不可逆性是关键MD5 是单向哈希知道颜色也推不出原密码再加上色值通道做了低位舍入处理0xF4 → 0xF0进一步加大了撞色碰撞提升整体安全性。这个设计灵感来自 Arc90 Lab 的 HashMask并由 Ian Young 提出了 4-bit 色彩分量的改进建议。另外还有个贴心的细节当输入长度不足minimum默认 6个字符时色条会显示为灰色——相当于提醒你密码太短而不是暴露真实长度对应的颜色。 3 步快速上手为密码框装上彩色指纹第 1 步获取插件源码git clone https://gitcode.com/gh_mirrors/ch/Chroma-Hash第 2 步引入 jQuery 和插件项目要求jQuery 1.3见package.json中的jam.dependencies声明。在你的页面按顺序加载两个脚本script srchttps://code.jquery.com/jquery-1.11.1.min.js/script script srcChroma-Hash/jquery.chroma-hash.js/script第 3 步一行代码启用$(input:password).chromaHash({bars: 3, salt: 7be82b35cb0199120eea35a4507c9acf, minimum: 6});就这一行页面上所有密码框右端都会出现 3 根随输入变化的彩色竖条。项目自带的 example.html 演示页配合jquery.chroma-hash.js一起打开即可预览效果就是最直观的参考。 小技巧初始化时若密码框没有id属性插件会自动生成chroma-hash_0、chroma-hash_1这样的占位 id无需手动补全。⚙️ 核心参数速查表参数默认值作用bars3显示色条数量可选 1、2、3、4salt一段 32 位十六进制哈希计算的盐值建议改成自己的随机串minimum6输入达到该长度前色条显示为灰色三个参数都在jquery.chroma-hash.js顶部的defaults对象中定义按需覆盖即可。 项目结构与源码导读项目非常小巧全部文件一览文件说明jquery.chroma-hash.js插件主体含 CSS 过渡检测、MD5 实现与色条渲染逻辑example.htmlHTML5 演示页展示密码 确认密码双字段效果CHANGELOG.md完整版本历史从 0.1.02009到 1.0.12014package.jsonnpm 元信息当前版本 1.0.1LICENSE.mdMIT 许可证值得源码爱好者关注的两处过渡动画自适应脚本启动时检测浏览器是否支持 CSStransition含-webkit-、-moz-等前缀支持则用 CSS 动画否则回退到 jQueryanimate()兼容老浏览器快速输入防抖1.0.0 版本修复了快速敲击时颜色出现微小差异的竞态问题色条切换前先.stop()停掉上一段动画体验流畅。 不止 jQuery多平台移植生态Chroma-Hash 的设计已被社区移植到多个平台方便不同技术栈的团队复用同一套彩色指纹体验iOSCHChromaHashViewAndroidChromaHashViewYUI3 / Prototype均有对应移植版本PythonpyChromaJavaChromaHash4j音频彩蛋同作者还有 Sonic-Hash用声音代替颜色验证输入✅ 总结小而美的实用利器适合谁场景前端开发者登录/注册/改密页面提升输入体验企业内网系统长密码、特殊字符多的账号减少登录失败率无障碍需求色觉友好度可结合bars数量自行权衡Chroma-Hash 遵循MIT 许可证体积小核心代码不到 160 行、依赖少仅 jQuery 1.3、配置简单是一行代码解决密码盲打焦虑的典型范例。如果你的系统里有让人反复清空重输的密码框不妨给它装上一枚彩色指纹试试。【免费下载链接】Chroma-HashA colorful visualization of password field input项目地址: https://gitcode.com/gh_mirrors/ch/Chroma-Hash创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考