调用onclick函数时，显示2个及更多字符

Question

Functionality:

User have to click on the drawn keyboard keypad on the screen to input name and email. Character will then be displayed in the input box.

What has been done:

Created the html keyboard and also the keyboard script. Hence, functionally, the keyboard is shown and the keyboard functionality is working.

Issue:

when the page is first loaded, the keyboard function is working properly, hence when the page is loaded and when user clicks on the keyboard, the character is displayed. However, after a period of idletime, when user uses the keyboard, the character displayed is not displayed correctly.

Hence, the error features is this: eg if user clicks on the character 'c' on the keyboard, rightfully, 'c' is supposed to be displayed in the input box, however, at this point when user clicks on'c', multiple 'c' is being displayed in the input box.

I am at a loss at what has happened and how could I rectify the issue. This issue only happens after a period of idle.

 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> 

Answer 1

You register click event every time #Email_Page fade in.

remove event first before adding new event :

//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 .....