h5手写键盘

html

 <table style="display:none;height: 112px;">
		<div style="display:flex;position: absolute;top:60px;line-height: 52px;">
			 <div id='text' style="width: 39px;border: 1px solid;height: 56px;margin: 0 12px;text-align: center;" onclick="clicks()"></div>
			 <div id='text1' style="width: 39px;border: 1px solid;height: 56px;margin: 0 10px;text-align: center;" onclick="clicks()"></div>
			 <div id='text11' style="width: 39px;border: 1px solid;height: 56px;margin: 0 10px;text-align: center;" onclick="clicks()"></div>
			 <div id='text111' style="width: 39px;border: 1px solid;height: 56px;margin: 0 10px;text-align: center;" onclick="clicks()"></div>
			 <div id='text1111' style="width:39px;border:1px solid;height: 56px;margin: 0 10px;text-align: center;" onclick="clicks()"></div>
	    </div>
          <tr>
            <td> <input id="Button1" type="button" value="1" onclick="return btnNum_onclick(1)" /></td>
            <td> <input id="Button2" type="button" value="2" onclick="return btnNum_onclick(2)"/></td>
            <td> <input id="Button3" type="button" value="3" onclick="return btnNum_onclick(3)"/></td>
            <td> <input id="go" type="button" value="返回" onclick="return go()"/></td>
          </tr>
          <tr>
            <td> <input id="Button4" type="button" value="4" onclick="return btnNum_onclick(4)"/></td>
            <td> <input id="Button5" type="button" value="5" onclick="return btnNum_onclick(5)"/></td>
            <td> <input id="Button6" type="button" value="6" onclick="return btnNum_onclick(6)"/></td>
            <td> <input id="ButtonDel" type="button" value="删除" onclick="return delText()"/></td>
          </tr>
          <tr>
              <td><input id="Button7" type="button" value="7" onclick="return btnNum_onclick(7)"/></td>
              <td><input id="Button8" type="button" value="8" onclick="return btnNum_onclick(8)"/></td>
              <td><input id="Button9" type="button" value="9" onclick="return btnNum_onclick(9)"/></td>
              <td><input id="ButtonClear" type="button" value="清空" onclick="return clearText()"/></td>
          </tr>
          <tr>
              <td><input id="Button0" type="button" value="0" onclick="return btnNum_onclick(0)" /></td>
          </tr>
        </table>

css

#keybolk{
      position: absolute;
      bottom: 0;
      width: 100vw;
    }
    #Button0{
      position: absolute;
      width: 100vw;
    }
   td input{
     width: 25vw;
   }

js

  // <!-- 鍵盤 -->
  let b='#text'
  // 定义储存邀请码变量a
  let a = ""
  // 返回
  function go(){
    $('#keybolk').slideUp('slow')
  }
  // 输入
  function btnNum_onclick(i) {
    if($(b).text().length != 1) {
      $(b).html(i);
      a+=$(b).html()
    }
    if(b=='#text1111') return false
    if($(b).text().length == 1) b=b+1
  }
  // 清空
  function clearText() {
    $("#text").html(''); 
    $("#text1").html(''); 
    $("#text11").html(''); 
    $("#text111").html(''); 
    $("#text1111").html(''); 
    b='#text',a=''
   }
  // 刪除
  function delText() {
    if(b=='#text') return false
    if($(b).text().length != 1){
      b=b.substring(0,b.length-1)
      a=a.substring(0,a.length-1)
      $(b).html('');
    }
    if($(b).text().length == 1)$(b).html(''),a=a.substring(0,a.length-1);
  }
  // 软键盘弹起问题
  function clicks() {
    $('#keybolk').slideDown("slow")
  }