网页软键盘 （javascript实现）

最新推荐文章于 2025-05-30 09:46:18 发布
转载 最新推荐文章于 2025-05-30 09:46:18 发布 · 1.3k 阅读 · 1
文章标签：

#javascript #function #button #border #null #ie

本文介绍了一个基于网页的软键盘输入方案，该方案通过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>
 
网页虚拟键盘
weixin_45747700的博客
10-20 902
1.网页虚拟键盘 2.创建JS包 jquery.js代码： /*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module...
功能强大的JS虚拟键盘
weixin_30915275的博客
02-07 613
最近做项目，我负责做网页前端，客户需要利用触摸屏进行操作，不外接鼠标键盘，但要求能录入文字，包括数字，英文，中文。思考了一下，决定用JS实现虚拟键盘。 首先上网搜索了一下JS虚拟键盘，在经过仔细筛选后，相中了VirtualKeyboard，一款功能强大的JS虚拟键盘插件。 先简单介绍一下VirtualKeyboard，它内置了100多种键盘布局和200多种输入法，9套可选皮肤方案，而且支持自建...
模拟键盘输入
weixin_34009794的博客
02-11 175
&lt;HTML&gt;&lt;HEAD&gt;&lt;script language="javascript"&gt;//more javascript from http://www.smallrain.netvar oPopUp=null;function SoftKeyboard(pwdObj){oPopUp=window.createPopup();var popBody=oPopUp....
VirtualKeyboard：强大的Js软键盘，提升输入体验
最新发布
gitblog_06733的博客
05-30 416
VirtualKeyboard：强大的Js软键盘，提升输入体验 【下载地址】VirtualKeyboard-强大的Js软键盘 VirtualKeyboard 是一款功能强大的JavaScript软键盘，内置超过100种键盘布局和200种输入法，满足全球用户的多样化需求。提供9套精美皮肤方案，支持自定义输入法，让您的输入体...
JavaScript网页键盘
anna19850927的博客
08-24 148
/*JS键盘 *实现大小写切换,使用时需指定页面上出现的位置,及接收输入的控件名称. *边框文字样式需在css中指定. *div1:出现的位置控件名称 *div2:接收输入的控件名称 */ var shift=false;//shift开关 var caps=false;//caps开关 var nowchar,nownum; var i; var upcolor="...
网页输入虚拟键盘软键盘js插件
qq_44884082的博客
10-20 2522
在网页上出现一个虚拟的键盘是不是很酷 我们看下效果哦 看到这里是否心动了呢 我们先看下架包结构 下面是大家所关心的咯 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> ...
JS网页小键盘
09-04
JS网页小键盘
用键盘浏览网页
chmlqw的专栏
04-28 2142
浏览器的常用快捷键，网上多就不说了。 键盘浏览网页最大的一个问题是，想跳到某个链接时，比较麻烦。 第一种，最笨的办法就是用TAB键一直切换，直到选中需要的链接，在点回车就可以了。但是因为一个网页上，链接太多，这个比较麻烦。 第二种，chrome,和firefox有专门的插件，能够快速定位到这些链接。看了一下还不多。 第三种，我突发灵感，想到的。先用上下箭头，浏览网页，找到自己敢兴趣的链接后
网页与键盘
Air的博客
06-15 359
从最基础的说起。本教程中，所有IE 均指 WindowXP + IE 6.0, 所有 FF 均指 FF 1.5。不用编程部分1.1 Form 中。 submit 的快捷键是 enter,reset 的快捷键是 esc。1.1.1 在 IE 中，按下enter 键后 却不会激发 submit 的 onclick 事件, 按下esc 键后 会激发 reset 的 onclick 事件
一个不错的web软键盘（JS实现）
03-24
这个我在网上找到的一个web软键盘，用js实现的，对于做电子商务网站或者有涉及到web在线交易的开发朋友们可能会有些帮助^^
HTML实现电脑软键盘
11-24
HTML实现电脑软键盘
页面软键盘（下载）
07-29
NULL 博文链接：https://qd-zys.iteye.com/blog/814895
在网页中使用软键盘的方法
02-10
偶然一个机会在使用触摸屏是，让用户使用软键盘输入个人信息。
用javascript实现软键盘
03-06
页面代码，及所引用keyboard.js,keyboard.css,keyboard.png 博文链接：https://sunxboy.iteye.com/blog/183574
软键盘的实现（JS）
紫薇星--路在你脚下！
05-06 1249
  //定义当前是否大写的状态 var CapsLockValue=0; var check; function setVariables() { tablewidth=630;  // logo width, in pixels tableheight=20;  // logo height, in pixels if (navigator.appName == "Netscape") {
C#中使用软键盘
02-26 2701
普通HTML中的引用： -51windows.Net－www.51windows.Net //定义当前是否大写的状态 var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, i
网页软键盘 让你的密码输入更加安全
创世宇图 宏图天下
04-13 3009
源代码如下：（HTML文件 保存为HTML文件可直接运行使用）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值