软键盘的实现（JS）

最新推荐文章于 2025-07-27 15:56:25 发布
原创 最新推荐文章于 2025-07-27 15:56:25 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#button #input #function #autocomplete #class #border

这篇博客介绍了如何使用JavaScript创建并实现一个软键盘。通过监听鼠标事件，软键盘可以随着用户的鼠标移动而移动，提供了数字、字母等按键，支持大小写切换，并能够将输入的内容实时反馈到指定的输入框中。软键盘的显示与隐藏也得到了处理，提供了一种便捷的在网页上输入的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 
<SCRIPT LANGUAGE="JavaScript">
<!--
//定义当前是否大写的状态
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:300px; top:0px; width:517px; z-index:180;display:none/">');
document.write ('  <table width=/"348/" border=/"0/" align=/"center/" cellpadding=/"3/" cellspacing=/"1/" bgcolor=/"#FF9900/">');
document.write ('    <FORM name=Calc action=/"/" method=post autocomplete=/"off/">');
document.write ('      <INPUT type=hidden value=ok name=action2>');
document.write ('      <tr> ');
document.write ('        <td align=/"left/" bgcolor=/"#FF9900/" align=/"center/"> <INPUT class=td1b type=password size=20 value=/"/" name=password> ');
document.write ('          <INPUT class=button type=button value=输入完毕 name=/"Submit3/" onclick=/"OverInput(curEditName);/"> <INPUT class=button type=reset value=输错重来 name=/"Submit23/"> ');
document.write ('          <input class=button type=button value=/"关闭/" name=/"Submit222/" onclick=/"closekeyboard(curEditName);/"> </td>');
document.write ('      </tr>');
document.write ('      <tr> ');
document.write ('        <td align=/"center/" bgcolor=/"#FFFFFF/" align=/"center/"> <table align=/"center/" width=/"98%/" border=/"0/" cellspacing=/"0/" cellpadding=/"0/">');
document.write ('            <tr align=/"left/" valign=/"middle/"> ');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'1/');/" value=/" 1 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'2/');/" value=/" 2 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'3/');/" value=/" 3 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'4/');/" value=/" 4 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'5/');/" value=/" 5 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'6/');/" value=/" 6 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'7/');/" value=/" 7 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'8/');/" value=/" 8 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'9/');/" value=/" 9 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'0/');/" value=/" 0 /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'-/');/" value=/" - /"></td>');
document.write ('              <td><input name=/"button10/" type=button value=/" BackSpace/" onclick=/"setpassvalue();/"> ');
document.write ('              </td>');
document.write ('              <td> </td>');
document.write ('            </tr>');
document.write ('            <tr align=/"left/" valign=/"middle/"> ');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'q/');/" value=/" q /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'w/');/" value=/" w /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'e/');/" value=/" e /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'r/');/" value=/" r /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'t/');/" value=/" t /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'y/');/" value=/" y /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'u/');/" value=/" u /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'i/');/" value=/" i /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'o/');/" value=/" o /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'p/');/" value=/" p /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button6/" type=button onClick=/"addValue(/':/');/" value=/" : /"></td>');
document.write ('              <td><input name=/"button12/" type=button onclick=/"OverInput(curEditName);/" value=/"   Enter  /"> ');
document.write ('              </td>');
document.write ('              <td> ');
document.write ('                </td>');
document.write ('            </tr>');
document.write ('            <tr align=/"left/" valign=/"middle/"> ');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'a/');/" value=/" a /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'s/');/" value=/" s /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'d/');/" value=/" d /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'f/');/" value=/" f /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'g/');/" value=/" g /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'h/');/" value=/" h /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'j/');/" value=/" j /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'k/');/" value=/" k /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'l/');/" value=/" l /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button8/" type=button onClick=/"addValue(/'[/');/" value=/" [ /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button9/" type=button onClick=/"addValue(/']/');/" value=/" ] /"></td>');
document.write ('              <td colspan=/"2/"><input name=/"button9/" type=button onClick=/"setCapsLock();/" value=/"切换大/小写/"></td>');
document.write ('            </tr>');
document.write ('            <tr align=/"left/" valign=/"middle/"> ');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'z/');/" value=/" z /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'x/');/" value=/" x /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'c/');/" value=/" c /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'v/');/" value=/" v /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'b/');/" value=/" b /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'n/');/" value=/" n /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'m/');/" value=/" m /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button3/" type=button onClick=/"addValue(/'</');/" value=/" < /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button4/" type=button onClick=/"addValue(/'>/');/" value=/" > /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button5/" type=button onClick=/"addValue(/'(/');/" value=/" ( /"></td>');
document.write ('              <td> ');
document.write ('                <input name=/"button7/" type=button onClick=/"addValue(/')/');/" value=/" ) /"></td>');
document.write ('              <td colspan=/"2/"> ');
document.write ('                <input name=/"showCapsLockValue/" type=reset  value=/"当前是小写 /"></td>');
document.write ('            </tr>');
document.write ('            <tr align=/"left/" valign=/"middle/"> ');
document.write ('              <td> ');
document.write ('                <input name=/"button2/" type=button onClick=/"addValue(/',/');/" value=/" , /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'~/');/" value=/" ~ /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'!/');/" value=/" ! /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'@/');/" value=/" @ /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'#/');/" value=/" # /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'$/');/" value=/" $ /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'%/');/" value=/" % /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'^/');/" value=/" ^ /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'*/');/" value=/" * /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'|/');/" value=/" | /"></td>');
document.write ('              <td> ');
document.write ('                <input type=button onclick=/"addValue(/'?/');/" value=/" ? /"></td>');
document.write ('              <td colspan=/"2/"><input name=/"button/" type=button onClick=/"addValue(/'=/');/" value=/"    =     /"></td>');
document.write ('            </tr>');
document.write ('          </table></td>');
document.write ('      </tr>');
document.write ('    </FORM>');
document.write ('  </table>');
document.write ('</DIV>');

//给输入的密码框添加新值
    function addValue(newValue)
    {
        if (CapsLockValue==0)
        {
            Calc.password.value += newValue;
        }
        else
        {
            Calc.password.value += newValue.toUpperCase();
        }
    }
//实现BackSpace键的功能
    function setpassvalue()
    {
        var longnum=Calc.password.value.length;
        var num
        num=Calc.password.value.substr(0,longnum-1);
        Calc.password.value=num;
    }
//输入完毕
    function OverInput(theForm)
    {
        eval("var theForm="+theForm+";");
        //m_pass.mempass.value=Calc.password.value;
        theForm.value=Calc.password.value;
            //alert(theForm.value);
        //theForm.value=m_pass.mempass.value;
        softkeyboard.style.display="none";
        Calc.password.value="";
    }
//关闭软键盘
    function closekeyboard(theForm)
    {
        //eval("var theForm="+theForm+";");
        //theForm.value="";
        softkeyboard.style.display="none";
        //Calc.password.value="";

    }
//显示软键盘
    function showkeyboard()
    {
        softkeyboard.style.display="block";
    }

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

<script>
//定义当前需用软键盘的表单和控件的名称
    var curEditName
    curEditName="form1.Password"
</script>
<form name="form1" method="post">
  <table border="0" width="250" cellspacing="0" cellpadding="2">
    <tr> 
      <td width="100%" align="right" nowrap class="cn90">输入： 
        <input type="test" name="Password" size="14" class="input" tabindex="1">
      </td>
      <td width="50%" class="cn90" nowrap><a onclick="showkeyboard(curEditName)" style={cursor:hand;}><font color="#0000CC">使用软键盘</font></a></td>
    </tr>
  </table>
</form>
 

javascript实现软键盘
weixin_43424506的博客
10-20 1271
javascript实现软键盘效果 使用HBuilder工具使用html+加内部css样式简单实现 练习JavaScript编写 css样式代码 <style> * { padding: 0; margin: 0; } body { background: #fff; text-align:center; wi...
js/vue实现简单中英文软键盘
chc183的博客
02-20 358
【代码】js/vue实现简单中英文软键盘。
一个不错的web软键盘（JS实现）
03-24
这个我在网上找到的一个web软键盘，用js实现的，对于做电子商务网站或者有涉及到web在线交易的开发朋友们可能会有些帮助^^
js软键盘，软键盘，js模拟键盘
07-12
这是本人自己编写，自己应用的程序，实现了软键盘的功能，可以输入键盘上大部分的字符及标点符号，可以进行大小写切换，就一个js文件，调用特别简单，显示大小可以自己设定，显示位置也可以自己设定。功能很强大，在一些安全性要求很高的输入界面，都需要配置软键盘工具！
VirtualKeyboard：强大的Js软键盘，提升输入体验
gitblog_06733的博客
05-30 427
VirtualKeyboard：强大的Js软键盘，提升输入体验 【下载地址】VirtualKeyboard-强大的Js软键盘 VirtualKeyboard 是一款功能强大的JavaScript软键盘，内置超过100种键盘布局和200种输入法，满足全球用户的多样化需求。提供9套精美皮肤方案，支持自定义输入法，让您的输入体...
js 实现的软键盘
06-03
js 实现 的 精美 软键盘 Javascript
js 软键盘 软键盘（js）
02-02
js 开发的软件盘，可以很好的避免网页监听
js软键盘(含输入法)
02-29
JAVASCRIPT做的软键盘，并含有多种语言，及中文输入法。
html实现小键盘,js之软键盘实现(源码) _javascript教程
weixin_32808905的博客
06-07 2182
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘：http://www.cnblogs.c...
js隐藏android软键盘,Js之软键盘实现(js源码)
weixin_42534100的博客
05-27 466
鉴于安全性的考虑，不少网站在登录输入密码时都采用了软键盘，避免一些键盘记录工具和木马对击键的捕捉。项目中也有这个需求，就分享给大家了，贴个效果图上来。。有兴趣的朋友可以收藏。。..如果觉得功能有点庞大，只需要数字小键盘的朋友，可参考代码精简。下载大键盘: http://www.cnblogs.com/Files/sccxszy/softKey.rar小键盘：http://www.cnblogs.c...
多语言支持的JavaScript软键盘实现指南
最新发布
weixin_26850469的博客
07-27 970
在现代网络应用中，JavaScript软键盘已成为提升用户体验的关键组件之一。与传统的硬件键盘相比，软键盘主要通过JavaScript在网页上动态创建，它不仅可以用于输入信息，还具有适应不同设备和特殊需求的优势。软键盘通过模仿实体键盘的布局和功能，使得用户能够在没有物理键盘的环境下通过鼠标或者触摸屏完成输入任务。本章将首先介绍软键盘的基本概念和它在现代网络应用中的多场景应用，包括移动设备、表单输入辅助以及为特殊需求用户（如残障人士）提供便利。
js实现的软键盘
07-07
使用js实现的软键盘，蛮不错的。。可以玩玩
Js之软键盘实现
11-12
Javascript<br>软键盘实现
Js软键盘
06-01
基于jquery插件的Js软键盘
用javascript实现软键盘
03-06
页面代码，及所引用keyboard.js,keyboard.css,keyboard.png 博文链接：https://sunxboy.iteye.com/blog/183574
javascript软键盘(虚拟键盘)
06-11
js软键盘，支持中英文切换、大小写、标点符号，可拖动显示位置，支持不同表单元素响应是否显示软键盘，适用于一些触摸屏的网页版页面设计；内附demo示例。
js实现软键盘（兼容所有浏览器）
热门推荐
JAVA-JS资源共享、技术交流平台
04-17 1万+
推荐一个程序员开发、学习的好网站，www.it123.top 欢迎大家转发收藏。 效果图如下： 代码如下： <SCRIPT LANGUAGE="JavaScript"> <!-- //定义当前是否大写的状态 var CapsLockValue=0; var check; function setVariables() { tablewidth=630; ...
Js之软键盘实现(js源码)
10-31
JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页交互和动态网页开发。在某些场景下，为了提高用户的安全性，特别是在输入敏感信息...对于那些需要处理敏感信息的Web应用来说，这样的软键盘实现是十分必要的。
JS调用本地软键盘.zip
11-14
在压缩包中的“JS调用本地软键盘”文件中，除了这个基本的示例之外，还可能包含了更详细的实现，例如如何关闭键盘、如何与特定输入框关联、如何处理不同浏览器的兼容性问题，以及可能的错误处理和用户反馈机制等。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值