react 登录页密码框大小写提示

关于登录页面密码框大小写提示 查了挺多资料 感觉做出来还是和自己想要的有差别 没办法 只能参考其他 有这样功能的页面的效果做了 下面是我参考百度输入框写的 记录一下 

这是展示的效果 发现百度做的 是只去判断输入的密码unicode码是否大小写 也没有判断shift键是否按住 挺简单的 

下面是react代码

 

 

 

以上便可以做到 基本的提示效果了 和百度一样

也可以做些小优化 在页面初始化时候 判断是否点击过capsLooks 判断大小写是否开启 不过这个状态要放在本地存储里 可以解决页面刷新 状态丢失的问题 但是如果在其他页面 点击capsLook时候是记录不到bigChar这个状态的 

还可以在密码框输入的时候判断shift是否按住 这样会更加严谨些吧 bug提多但是没有解决办法 确实这个功能 现在用的也不多