js 弹出虚拟键盘修改密码的简单实例


Posted in Javascript onOctober 10, 2016

实例如下:

//定义当前是否大写的状态
window.onload=
  function()
  {
    password1=null;    
    initCalc();
  }

var CapsLockValue=0;

var check;
function setVariables() {
tablewidth=630; // logo width, in pixels
tableheight=20; // logo height, in pixels
if (navigator.appName == "Netscape") {
horz=".left";
vert=".top";
docStyle="document.";
styleDoc="";
innerW="window.innerWidth";
innerH="window.innerHeight";
offsetX="window.pageXOffset";
offsetY="window.pageYOffset";
}
else {
horz=".pixelLeft";
vert=".pixelTop";
docStyle="";
styleDoc=".style";
innerW="document.body.clientWidth";
innerH="document.body.clientHeight";
offsetX="document.body.scrollLeft";
offsetY="document.body.scrollTop";
  }
}
function checkLocation() {
if (check) {
objectXY="softkeyboard";
var availableX=eval(innerW);
var availableY=eval(innerH);
var currentX=eval(offsetX);
var currentY=eval(offsetY);
x=availableX-tablewidth+currentX;
//y=availableY-tableheight+currentY;
y=currentY;

evalMove();
}
setTimeout("checkLocation()",0);
}
function evalMove() {
//eval(docStyle + objectXY + styleDoc + horz + "=" + x);
eval(docStyle + objectXY + styleDoc + vert + "=" + y);
}
  self.onError=null;
  currentX = currentY = 0; 
  whichIt = null;      
  lastScrollX = 0; lastScrollY = 0;
  NS = (document.layers) ? 1 : 0;
  IE = (document.all) ? 1: 0;
  function heartBeat() {
    if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
    if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
    if(diffY != lastScrollY) {
          percent = .1 * (diffY - lastScrollY);
          if(percent > 0) percent = Math.ceil(percent);
          else percent = Math.floor(percent);
          if(IE) document.all.softkeyboard.style.pixelTop += percent;
          if(NS) document.softkeyboard.top += percent; 
          lastScrollY = lastScrollY + percent;}
    if(diffX != lastScrollX) {
      percent = .1 * (diffX - lastScrollX);
      if(percent > 0) percent = Math.ceil(percent);
      else percent = Math.floor(percent);
      if(IE) document.all.softkeyboard.style.pixelLeft += percent;
      if(NS) document.softkeyboard.left += percent;
      lastScrollX = lastScrollX + percent;  }    }
  function checkFocus(x,y) { 
      stalkerx = document.softkeyboard.pageX;
      stalkery = document.softkeyboard.pageY;
      stalkerwidth = document.softkeyboard.clip.width;
      stalkerheight = document.softkeyboard.clip.height;
      if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
      else return false;}
  function grabIt(e) {
    check = false;
    if(IE) {
      whichIt = event.srcElement;
      while (whichIt.id.indexOf("softkeyboard") == -1) {
        whichIt = whichIt.parentElement;
        if (whichIt == null) { return true; } }
      whichIt.style.pixelLeft = whichIt.offsetLeft;
      whichIt.style.pixelTop = whichIt.offsetTop;
      currentX = (event.clientX + document.body.scrollLeft);
        currentY = (event.clientY + document.body.scrollTop);   
    } else { 
      window.captureEvents(Event.MOUSEMOVE);
      if(checkFocus (e.pageX,e.pageY)) { 
          whichIt = document.softkeyboard;
          StalkerTouchedX = e.pageX-document.softkeyboard.pageX;
          StalkerTouchedY = e.pageY-document.softkeyboard.pageY;} }
    return true;  }
  function moveIt(e) {
    if (whichIt == null) { return false; }
    if(IE) {
      newX = (event.clientX + document.body.scrollLeft);
      newY = (event.clientY + document.body.scrollTop);
      distanceX = (newX - currentX);  distanceY = (newY - currentY);
      currentX = newX;  currentY = newY;
      whichIt.style.pixelLeft += distanceX;
      whichIt.style.pixelTop += distanceY;
      if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;
      if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;
      if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
      if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
      event.returnValue = false;
    } else { 
      whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
      if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
      if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
    if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
      if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
      return false;}
    return false;  }
  function dropIt() {whichIt = null;
    if(NS) window.releaseEvents (Event.MOUSEMOVE);
    return true;  }
  if(NS) {window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
    window.onmousedown = grabIt;
     window.onmousemove = moveIt;
    window.onmouseup = dropIt;  }
  if(IE) {
    document.onmousedown = grabIt;
     document.onmousemove = moveIt;
    document.onmouseup = dropIt;  }
//  if(NS || IE) action = window.setInterval("heartBeat()",1);



  document.write("<DIV align=center id=\"softkeyboard\" name=\"softkeyboard\" style=\"position:absolute; left:0px; top:0px; width:500px; z-index:180;display:none\"> <table id=\"CalcTable\" width=\"\" border=\"0\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" bgcolor=\"\">      <FORM id=Calc name=Calc action=\"\" method=post autocomplete=\"off\">    <tr> <td title=\"为保证后台登陆安全,建议使用输入器输入帐号密码\" align=\"right\" valign=\"middle\" bgcolor=\"\" style=\"cursor: default;height:30\"> <INPUT type=hidden value=\"\" name=password> <INPUT type=hidden value=ok name=action2> <font style=\"font-size:13px;\">-+-www.soojs.com?后台管理帐号密码输入器-+-</font>              <INPUT style=\"width:100px;height:20px;background-color:#54BAF1;\" type=button value=\"使用键盘输入\" bgtype=\"1\" onclick=\"password1.readOnly=0;password1.focus();softkeyboard.style.display='none';password1.value='';\"><span style=\"width:2px;\"></span></td>   </tr>   <tr align=\"center\">     <td align=\"center\" bgcolor=\"#FFFFFF\"> <table align=\"center\" width=\"%\" border=\"0\" cellspacing=\"1\" cellpadding=\"0\">\n     <tr align=\"left\" valign=\"middle\"> \n      <td> <input type=button value=\" ~ \"></td>\n      <td> <input type=button value=\" ! \"></td>\n      <td> <input type=button value=\" @ \"></td>\n      <td> <input type=button value=\" # \"></td>\n      <td> <input type=button value=\" $ \"></td>\n      <td> <input type=button value=\" % \"></td>\n      <td> <input type=button value=\" ^ \"></td>\n      <td> <input type=button value=\" & \"></td>\n      <td> <input type=button value=\" * \"></td>\n      <td> <input type=button value=\" ( \"></td>\n      <td> <input type=button value=\" ) \"></td>\n      <td> <input type=button value=\" _ \"></td>\n      <td> <input type=button value=\" + \"></td>\n      <td> <input type=button value=\" | \"></td>\n      <td colspan=\"1\" rowspan=\"2\"> <input name=\"button10\" type=button value=\" 退格\" onclick=\"setpassvalue();\" onDblClick=\"setpassvalue();\" style=\"width:100px;height:42px\"> \n      </td>\n     </tr>\n     <tr align=\"left\" valign=\"middle\"> \n      <td> <input type=button value=\" ` \"></td>\n      <td> <input type=button value=\" 1 \"></td>\n      <td> <input type=button value=\" 2 \"></td>\n      <td> <input type=button value=\" 3 \"></td>\n      <td> <input type=button value=\" 4 \"></td>\n      <td> <input type=button value=\" 5 \"></td>\n      <td> <input type=button value=\" 6 \"></td>\n      <td> <input type=button value=\" 7 \"></td>\n      <td> <input type=button value=\" 8 \"></td>\n      <td> <input type=button value=\" 9 \"></td>\n      <td> <input name=\"button6\" type=button value=\" 0 \"></td>\n      <td> <input type=button value=\" - \"></td>\n      <td> <input type=button value=\" = \"></td>\n      <td> <input type=button value=\" \\ \"></td>\n      <td> </td>\n     </tr>\n     <tr align=\"left\" valign=\"middle\"> \n      <td> <input type=button value=\" q \"></td>\n      <td> <input type=button value=\" w \"></td>\n      <td> <input type=button value=\" e \"></td>\n      <td> <input type=button value=\" r \"></td>\n      <td> <input type=button value=\" t \"></td>\n      <td> <input type=button value=\" y \"></td>\n      <td> <input type=button value=\" u \"></td>\n      <td> <input type=button value=\" i \"></td>\n      <td> <input type=button value=\" o \"></td>\n      <td> <input name=\"button8\" type=button value=\" p \"></td>\n      <td> <input name=\"button9\" type=button value=\" { \"></td>\n      <td> <input type=button value=\" } \"></td>\n      <td> <input type=button value=\" [ \"></td>\n      <td> <input type=button value=\" ] \"></td>\n      <td><input name=\"button9\" type=button onClick=\"capsLockText();setCapsLock();\" onDblClick=\"capsLockText();setCapsLock();\" value=\"切换大/小写\" style=\"width:100px;\"></td>\n     </tr>\n     <tr align=\"left\" valign=\"middle\"> \n      <td> <input type=button value=\" a \"></td>\n      <td> <input type=button value=\" s \"></td>\n      <td> <input type=button value=\" d \"></td>\n      <td> <input type=button value=\" f \"></td>\n      <td> <input type=button value=\" g \"></td>\n      <td> <input type=button value=\" h \"></td>\n      <td> <input type=button value=\" j \"></td>\n      <td> <input name=\"button3\" type=button value=\" k \"></td>\n      <td> <input name=\"button4\" type=button value=\" l \"></td>\n      <td> <input name=\"button5\" type=button value=\" : \"></td>\n      <td> <input name=\"button7\" type=button value=\" " \"></td>\n      <td> <input type=button value=\" ; \"></td>\n      <td> <input type=button value=\" ' \"></td>\n      <td rowspan=\"2\" colspan=\"2\"> <input name=\"button12\" type=button onclick=\"OverInput();\" value=\"  确定 \" style=\"width:130px;height:42\"></td>\n     </tr>\n     <tr align=\"left\" valign=\"middle\"> \n      <td> <input name=\"button2\" type=button value=\" z \"></td>\n      <td> <input type=button value=\" x \"></td>\n      <td> <input type=button value=\" c \"></td>\n      <td> <input type=button value=\" v \"></td>\n      <td> <input type=button value=\" b \"></td>\n      <td> <input type=button value=\" n \"></td>\n      <td> <input type=button value=\" m \"></td>\n      <td> <input type=button value=\" < \"></td>\n      <td> <input type=button value=\" > \"></td>\n      <td> <input type=button value=\" ? \"></td>\n      <td> <input type=button value=\" , \"></td>\n      <td> <input type=button value=\" . \"></td>\n      <td> <input type=button value=\" / \"></td>\n     </tr>\n    </table></td>  </FORM>   </tr> </table></DIV>")
//给输入的密码框添加新值
  function addValue(newValue)
  {
    if (CapsLockValue==0)
    {
      var str=Calc.password.value;
      if(str.length<password1.maxLength)
      {
        Calc.password.value += newValue;
      }      
      if(str.length<=password1.maxLength)
      {
        password1.value=Calc.password.value;
      }
    }
    else
    {
      var str=Calc.password.value;
      if(str.length<password1.maxLength)
      {
        Calc.password.value += newValue.toUpperCase();
      }
      if(str.length<=password1.maxLength)
      {
        password1.value=Calc.password.value;
      }
    }
  }
//实现BackSpace键的功能
  function setpassvalue()
  {
    var longnum=Calc.password.value.length;
    var num
    num=Calc.password.value.substr(0,longnum-1);
    Calc.password.value=num;
    var str=Calc.password.value;
      password1.value=Calc.password.value;
  }
//输入完毕
  function OverInput()
  {
    //m_pass.mempass.value=Calc.password.value;
    var str=Calc.password.value;
      password1.value=Calc.password.value;
      //alert(theForm.value);
    //theForm.value=m_pass.mempass.value;
    softkeyboard.style.display="none";
    Calc.password.value="";
    password1.readOnly=1;
    //password1.value=Calc.password.value;
  }
//关闭软键盘
  function closekeyboard(theForm)
  {
    //eval("var theForm="+theForm+";");
    //theForm.value="";
    softkeyboard.style.display="none";
    //Calc.password.value="";

  }
//显示软键盘
  function showkeyboard()
  {
    if(event.y+140)
    softkeyboard.style.top=event.y+document.body.scrollTop+15;
    if((event.x-250)>0)
    {
      softkeyboard.style.left=event.x-250;
    }
    else
    {
      softkeyboard.style.left=0;
    }
    
    softkeyboard.style.display="block";
    password1.readOnly=1;
    password1.blur();
    //password1.value="";
  }

//设置是否大写的值
function setCapsLock()
{
  if (CapsLockValue==0)
  {
    CapsLockValue=1
//    Calc.showCapsLockValue.value="当前是大写 ";
  }
  else 
  {
    CapsLockValue=0
//    Calc.showCapsLockValue.value="当前是小写 ";
  }
}


function setCalcborder()
{
  CalcTable.style.border="1px solid #0090FD"
}

function setHead()
{
  CalcTable.cells[0].style.backgroundColor="#7EDEFF"  
}

function setCalcButtonBg()
{
  for(var i=0;i<Calc.elements.length;i++)
  {
    if(Calc.elements[i].type=="button"&&Calc.elements[i].bgtype!="1")
    {
  //    if(i==10)
//  alert(123);
      Calc.elements[i].style.borderTopWidth= 0
      Calc.elements[i].style.borderRightWidth= 2
      Calc.elements[i].style.borderBottomWidth= 2
      Calc.elements[i].style.borderLeftWidth= 0
      Calc.elements[i].style.borderTopStyle= "none";
      Calc.elements[i].style.borderRightStyle= "solid";
      Calc.elements[i].style.borderBottomStyle= "solid";
      Calc.elements[i].style.borderLeftStyle= "none";
      //#46AC17
      Calc.elements[i].style.borderTopColor= "#118ACC";
      Calc.elements[i].style.borderRightColor= "#118ACC";
      Calc.elements[i].style.borderBottomColor= "#118ACC";
      Calc.elements[i].style.borderLeftColor= "#118ACC";
      //#CBF3B2
      Calc.elements[i].style.backgroundColor="#ADDEF8";

      
      
      var str1=Calc.elements[i].value;
      str1=str1.trim();
      /*
      if(str1=="`") 
      {
        Calc.elements[i].style.fontSize=14;
      }
      */

      if(str1.length==1)
      {
        //Calc.elements[i].style.fontSize=16;
        //Calc.elements[i].style.fontWeight='bold';
      }
      
      var thisButtonValue=Calc.elements[i].value;
      thisButtonValue=thisButtonValue.trim();
      if(thisButtonValue.length==1)
      {
        Calc.elements[i].onclick=
          function ()
          {
            var thisButtonValue=this.value;
            thisButtonValue=thisButtonValue.trim();
            addValue(thisButtonValue);
            //alert(234)
          }
        Calc.elements[i].ondblclick=
          function ()
          {
            var thisButtonValue=this.value;
            thisButtonValue=thisButtonValue.trim();
            addValue(thisButtonValue);
            //alert(234)
          }
      }
      
    }
  }
}

function initCalc()
{
  setCalcborder();
  setHead();
  setCalcButtonBg();
}

String.prototype.trim = function()
{
  // 用正则表达式将前后空格
  // 用空字符串替代。
  return this.replace(/(^\s*)|(\s*$)/g, "");
}

var capsLockFlag;
capsLockFlag=true;

function capsLockText()
{
if(capsLockFlag)//改成大写
{
  for(var i=0;i<Calc.elements.length;i++)
  {
      var char=Calc.elements[i].value;
      var char=char.trim()
    if(Calc.elements[i].type=="button"&&char>="a"&&char<="z"&&char.length==1)
    {
    
      Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)-32)+" "
    }
  }
}
else
{
  for(var i=0;i<Calc.elements.length;i++)
  {
      var char=Calc.elements[i].value;
      var char=char.trim()
    if(Calc.elements[i].type=="button"&&char>="A"&&char<="Z"&&char.length==1)
    {
    
      Calc.elements[i].value=" "+String.fromCharCode(char.charCodeAt(0)+32)+" "
    }
  }
}
capsLockFlag=!capsLockFlag;
}

以上就是小编为大家带来的js 弹出虚拟键盘修改密码的简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
js实现汉字排序的方法
Jul 23 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
js捕捉键盘事件和按键键值的方法
Oct 10 #Javascript
js中获取键盘事件的简单实现方法
Oct 10 #Javascript
轻松实现jquery选项卡切换效果
Oct 10 #Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 #Javascript
Javascript生成带参数的二维码示例
Oct 10 #Javascript
详细讲解JavaScript中的this绑定
Oct 10 #Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 #Javascript
You might like
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
php判断linux下程序问题实例
2015/07/09 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
python获取mp3文件信息的方法
2015/06/15 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python3调用R的示例代码
2018/02/23 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
pandas实现将日期转换成timestamp
2019/12/07 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
django中嵌套的try-except实例
2020/05/21 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
建筑设计师岗位职责
2013/11/18 职场文书
环保倡议书400字
2014/05/15 职场文书
财务会计实训报告
2014/11/05 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
商务信函英语问候语
2015/11/10 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP