调用 onclick 函数时会显示 2 个或更多字符

2 and more characters are shown when onclick function is called

本文关键字：字符 显示 onclick 函数 调用      更新时间：2023-09-26

功能：

用户必须单击屏幕上绘制的键盘键盘才能输入姓名和电子邮件。然后字符将显示在输入框中。

做了什么：

创建了 html 键盘和键盘脚本。因此，在功能上，将显示键盘并且键盘功能正常工作。

问题：

首次加载页面时，键盘

功能工作正常，因此当页面加载和用户单击键盘时，将显示字符。但是，经过一段时间的空闲时间后，当用户使用键盘时，显示的字符无法正确显示。

因此，错误特征是这样的：例如，如果用户单击键盘上的字符"c"，则正确地，"c"应该显示在输入框中，但是，此时当用户单击"c"时，输入框中显示多个"c"。

我对发生的事情以及如何纠正这个问题感到茫然。此问题仅在空闲一段时间后发生。

function Start() {
  //Method  call to slide and fade in second page to the left padding
  $('#Email_Page').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {
      //Keyboard Script
      $('#keyboard li').click(function() {
        console.log("click");
        idleTime = 0;
        var $this = $(this),
          character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
        console.log(character);
        // Shift keys
        if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
          $('.letter').toggleClass('uppercase');
          $('.symbol span').toggle();
          shift = (shift === true) ? false : true;
          capslock = false;
          return false;
        }
        // Caps lock
        if ($this.hasClass('capslock')) {
          $('.letter').toggleClass('uppercase');
          capslock = true;
          return false;
        }
        // Delete
        if ($this.hasClass('delete')) {
          var html = $write.val();
          $write.val(html.substr(0, html.length - 1));
          return false;
        }
        // Clear
        if ($this.hasClass('clear')) {
          var html = $write.val();
          $write.val("");
          return false;
        }
        // Special characters
        if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
        if ($this.hasClass('space')) character = ' ';
        if ($this.hasClass('tab')) character = "'t";
        if ($this.hasClass('return')) character = "'n";
        // Uppercase letter
        if ($this.hasClass('uppercase')) character = character.toUpperCase();
        // Remove shift once a key is clicked.
        if (shift === true) {
          $('.symbol span').toggle();
          if (capslock === false) $('.letter').toggleClass('uppercase');
          shift = false;
        }
        // Add the character
        $write.val($write.val() + character);
      });
    }
  });
}
// Keyboard CSS
 .keyboard {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style: none;
}
.keyboard li {
  font-size: 30px;
  float: left;
  margin: 2 2 2 2;
  width: 70px;
  height: 70px;
  line-height: 80px;
  text-align: center;
  color: #716b6c;
  background: #e3d7d8;
  border: 1px solid #f9f9f9;
  -moz-border-radius: 5px;
  list-style: none;
  -webkit-border-radius: 5px;
}
.capslock,
.tab,
.left-shift {
  clear: left;
}
.keyboard .tab,
.keyboard .delete {
  width: 165px;
}
.keyboard .capslock {
  width: 101px;
}
.keyboard .return {
  width: 101px;
}
.keyboard .left-shift {
  width: 165px;
}
.keyboard .right-shift {
  width: 165px;
}
.lastitem {
  margin-right: 0;
}
.uppercase {
  text-transform: uppercase;
}
.keyboard .space {
  clear: left;
  width: 750px;
}
.on {
  display: none;
}
.keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #e5e5e5;
  cursor: pointer;
}
<!--Email Buttons-->
<table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
  <tr style="height: 1920;">
    <td width="1080">
      <ul class="keyboard" id="keyboard" style="z-index:2; position:absolute;left:120px; top:850px; color: #000000;">
        <font face="CenturyGothic"><li class="symbol"><span class="off">1</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">2</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">3</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">4</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">5</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">6</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">7</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">8</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">9</span></li></font>
        <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">0</span></li></font>
        <font face="CenturyGothic"><li class="letter" style="clear: left;">q</li></font>
        <font face="CenturyGothic"><li class="letter">w</li></font>
        <font face="CenturyGothic"><li class="letter">e</li></font>
        <font face="CenturyGothic"><li class="letter">r</li></font>
        <font face="CenturyGothic"><li class="letter">t</li></font>
        <font face="CenturyGothic"><li class="letter">y</li></font>
        <font face="CenturyGothic"><li class="letter">u</li></font>
        <font face="CenturyGothic"><li class="letter">i</li></font>
        <font face="CenturyGothic"><li class="letter">o</li></font>
        <font face="CenturyGothic"><li class="letter lastitem">p</li></font>
        <font face="CenturyGothic"><li class="letter" style="clear: left;">a</li></font>
        <font face="CenturyGothic"><li class="letter">s</li></font>
        <font face="CenturyGothic"><li class="letter">d</li></font>
        <font face="CenturyGothic"><li class="letter">f</li></font>
        <font face="CenturyGothic"><li class="letter">g</li></font>
        <font face="CenturyGothic"><li class="letter">h</li></font>
        <font face="CenturyGothic"><li class="letter">j</li></font>
        <font face="CenturyGothic"><li class="letter">k</li></font>
        <font face="CenturyGothic"><li class="letter">l</li></font>
        <font face="CenturyGothic"><li class="letter lastitem">z</li></font>
        <font face="CenturyGothic"><li class="letter" style="clear: left;">x</li></font>
        <font face="CenturyGothic"><li class="letter">c</li></font>
        <font face="CenturyGothic"><li class="letter">v</li></font>
        <font face="CenturyGothic"><li class="letter">b</li></font>
        <font face="CenturyGothic"><li class="letter">n</li></fint>
                            <font face ="CenturyGothic"><li class="letter">m</li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">@</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">.</span></li></font>
        <font face="CenturyGothic"><li class="symbol"><span class="off">-</span></li></font>
        <font face="CenturyGothic"><li class="symbol lastitem"><span class="off">_</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="clear: left; width: 85px;"><span class="off">.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@hotmail.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@yahoo.com</span></li></font>
        <font face="CenturyGothic"><li class="symbol" style="width: 215px;"><span class="off">@gmail.com</span></li></font>
        <font face="CenturyGothic"><li class="clear" style=" clear: left; width: 370px;">Clear</li></font>
        <font face="CenturyGothic"> <li class="delete lastitem" style="width: 370px;">Delete</li></font>
        <font face="CenturyGothic"><li class="space lastitem">Space &nbsp;</li></font>
      </ul>
    </td>
  </tr>
</table>

每次

#Email_Page淡入时都会注册click事件。

添加新事件之前先删除事件： 

//Method  call to slide and fade in second page to the left padding
$('#Email_Page').fadeIn({
    duration: slideDuration,
    queue: false,
    complete: function() {
        //Keyboard Script
        $('#keyboard li').off('click').on('click',function() {    
            ..........
            etc etc .....
相关文章：