功能
用户可以通过屏幕上的Javascript键盘将char var输入到输入文本框中。
已完成的工作：
我创建了javascript键盘。 还创建了输入文本框 和 还创建了方法调用，以便在单击javascript键盘上的键时将char添加到文本框中。
问题：
当我尝试在文本中间插入一个字符时，问题就出现了，字符只会添加到文本的末尾而不是插入我点击的位置。
含义：对于单词TEST。如果我试图插入字符“E＆＃39; E＆＃39;介于＆＃39; E＆＃39;之间和＆＃39; S＆＃39;，它将显示为TESTE而不是TEEST。
我想在这方面寻求帮助，因为我不确定我错过了什么......谢谢。
代码：
//Keyboard InputField
$("#NameField").focus(function() {
$write = $('#NameField');
$("#keyboard").show();
});
function accept() {
//To reset all fields: NameField and EmailField reset to empty value
$("#NameField").val("");
$("#EmailField").val("");
$('#page').fadeOut({
duration: slideDuration,
queue: false
});
//Keyboard Script
//To remove 'click' event before adding new click 'event' everytime after page is loaded: allow keyboard character event to be run only once only when page is loaded
$('#Vivo_Print_Email').fadeIn({
duration: slideDuration,
queue: false,
complete: function() {
$('#keyboard li').off('click').on('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: 20px;
float: left;
margin: 2 2 2 2;
width: 65px;
height: 50px;
line-height: 50px;
text-align: center;
color: #000;
background: #ffffff;
border: 1px solid #000;
-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: 685px;
}
.on {
display: none;
}
.keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
cursor: pointer;
}<div id="TextBox" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=18; top:0px; left:0px;">
<!--Email Buttons-->
<table align="center" cellspacing="0" cellpadding="0" width="1080" top="550px">
<tr style="height: 1920;">
<td width="1080">
<div id="email_wrong" style="z-index:99; position:absolute; top:190px; left:760px; display: none; font-size:20px; font-family:'CenturyGothic'; width:1080; color:#000000;"><font face="CenturyGothic">* Please fill in all fields.</font>
</div>
<input type="text" id="NameField" style="position:absolute; top:220px; left:760px; height:50px; width:485px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index:100;" autofocus src="lib/VivoCity/img/transparent.png">
<button id="Submit" onclick="Submit()">
<img src="lib/img/PAGE08/SubmitButton.png">
</button>
<ul class="keyboard" id="keyboard" style="z-index:19; position:absolute;left:600px; top: 400px; 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: 75px;"><span class="off">.com</span></li></font>
<font face="CenturyGothic"><li class="symbol" style="width: 200px;"><span class="off">@hotmail.com</span></li></font>
<font face="CenturyGothic"><li class="symbol" style="width: 200px;"><span class="off">@yahoo.com</span></li></font>
<font face="CenturyGothic"><li class="symbol" style="width: 198px;"><span class="off">@gmail.com</span></li></font>
<font face="CenturyGothic"><li class="clear" style=" clear: left; width: 330px;">Clear</li></font>
<font face="CenturyGothic"> <li class="delete lastitem" style="width: 349px;">Backspace</li></font>
<font face="CenturyGothic"><li class="space lastitem">Space </li></font>
</ul>
</td>
</tr>
</table>
</div>
答案 0 :(得分：0)
我猜你错过了实现你想在中间插入任何字符的情况。 当我查看您的代码时，新输入的字符仅添加到最后
// Add the character
$write.val($write.val() + character);