html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...
不知道大家注意到没有,很多人性话的网站再输入密码的时候,如果开启大写锁定下过(切换键A左边的Cap Lock按键),那么就会给出一个提示,因为很多时候密码验证是区分大小写的,如果不小心开启或者关闭大小写就有可能导致输入密码错误,还有在用户输入密码时,可以通过密码的显示与隐藏来查看输入的是否就是自己想输入的密码,减少密码输入的错误,都是一些人性化,提高用户体验性的举措,
下面就介绍一下如何利用javascript实现此功能。
onkeypress
这个事件在用户按下并放开任何字母数字键时发生。系统按钮(例如,箭头键和功能键)无法得到识别。
onkeyup
这个事件在用开任何先前按下的键盘键时发生。
onkeydown
这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。 本文主要应用了前两个事件
代码如下:
对密码输入框的优化
#capital{
color:#F90;
padding:2px;
position:absolute;
}
/* 检测输入框的大小写是否开启 */
window.οnlοad=function(){
function isIE(){
if(!!window.ActiveXObject || "ActiveXObject" in window){
return true;
}
else{
return false;
}
}
(function(){
var inputPWD=document.getElementById('loginPasswd');
var capital=false;
var capitalTip={
elem:document.getElementById('capital'),
toggle:function(s){
var sy=this.elem.style;
var d=sy.display;
if(s){
sy.display = s;
}
else{
sy.display=d=='none'?'':'none';
}
}
}
var detectCapsLock=function(event){
if(capital){return};
var e = event||window.event;
var keyCode = e.keyCode||e.which;
var isShift = e.shiftKey ||(keyCode == 16 ) || false ;
if(((keyCode>=65&&keyCode<=90 )&&!isShift)||((keyCode>=97&&keyCode<=122 )&&isShift)){
capitalTip.toggle('block');
capital=true
}
else{
capitalTip.toggle('none');
}
}
if(!isIE()){
inputPWD.οnkeypress=detectCapsLock;
inputPWD.οnkeyup=function(event){
var e = event||window.event;
if(e.keyCode == 20 && capital){
capitalTip.toggle();
return false;
}
}
}
})()
}
请输入密码:显示密码
/* 通过多选框 实现密码显示与隐藏设置 */
function $(id)
{
return document.getElementById(id);
}
$('xian').οnclick=function(){
var xuan=$('xian').checked;
var loginPasswd=$("loginPasswd");
if(xuan==true){
loginPasswd.type="text";
}else{
loginPasswd.type="password";
}
}
html选择按键点击后锁死输入框_js实现的键盘开启大写锁定提示和密码显示与隐藏的效果...相关推荐
- html选择按键点击后锁死输入框_js Dom为页面中的元素绑定键盘或鼠标事件
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouSEOver 鼠标移入 onmouSEOut 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange ...
- html选择按键点击后锁死输入框_button按钮防重复提交(点击提交之后提交按钮变灰,操作执行完之后恢复)...
jsp中form表单: js中save方法: function save() { document.getElementById('button').disabled=true; var conten ...
- JavaScript实现按键快速获取输入框光标
JavaScript实现按键快速获取输入框光标 案例池子: JS实现鼠标悬停变色 JavaScript中的排他算法实现按钮单选 JavaScript中的localStorage JavaScript中 ...
- 按键精灵在输入框中输入文本
按键精灵在输入框中输入文本 SayString
- 前端学习-DOM:清空输入框,输入框内容的显示与隐藏,双色球(获取不重复的随机数)
1.清空输入框 <style>div {position: relative;width: 180px;}span {display: none;position: absolute;ri ...
- html金额输入框转大写,纯CSS实现输入框字符自动转为小写或大写
对于输入框的字符,如果要求只能输入小写或大写,怎么处理?js实现?提交到后台程序转换?其实很简单,CSS就有这个功能,一条语句就搞定. 纯CSS实现输入框字符自动转为小写或大写 CSS .lowerc ...
- ElementUI中el-select下拉框选择不同的项控制其他控件(单选控件)的显示和隐藏
场景 在el-select的下拉框中,下拉选择指定的下拉项时才会显示后面的单选框,否则不显示. 效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizh ...
- input输入框小写字母自动转换成大写字母
input输入框小写字母自动转换成大写字母 text-transform:uppercase
- android 小写字母转大写,android将输入到输入框的小写字母自动转换为大写
将输入到输入框的小写字母自动转换为大写 //车牌号码 carNumInfomationTextView = (AutoCompleteTextView) findViewById(R.id.carNu ...
最新文章
- UC伯克利教授Stuart Russell人工智能基础概念与34个误区
- 【C++】关于随机函数与概率设置
- Cordova build构建常见问题整理
- Oracle启用、禁用角色
- maven 部分命令
- SAP Commerce Accelerator从2005升级到2011的步骤
- iOS 第五期考核题(字典与数组嵌套,字典的排序/删除)
- ctf 改变图片高度_通过CRC32爆破修改图片的宽高 ctf-misc图片隐写
- Fragment-传递参数
- 视频教程-第03章-二进制、八进制、十进制、十六进制之间的转换-网络技术
- 中学计算机课都学什么时候开始,初一的学习课程都有哪些 都学什么科目
- 基于C#实现的小型动物识别推理系统
- 施主,贫僧乃东土大唐而来,恳请在此借宿一晚……...
- ActiveX控件之制作图片属性页
- vue 图片转base64格式的方法
- 网线传输速度测试_网络带宽和速度测试windows和linux用iperf工具
- python(64位)安装超详细
- 基于电压型磁链观测器的异步电机矢量控制学习
- 【STM32F407】第4章 RTX5操作系统移植(MDK AC5)
- PDF 阅读器福昕阅读器 Foxit Reader v9.7.0.29455 中文便携版