在输入文本框的文本中间插入键盘字符值
insert keyboard character value into middle of text in input textbox
功能:
用户可以通过屏幕上的Javascript键盘将char var输入到输入文本框中。
已经做了什么:
我已经创建了javascript键盘。还创建了输入文本框和还创建了方法调用,以便在单击javascript键盘上的键时将char添加到文本框中。
问题:
当我试图在文本中间插入字符时,问题就会发生,字符只会添加到文本的末尾,而不是插入到我点击的位置。
含义:对于单词TEST。如果我试图在"E"answers"S"之间插入字符"E",它将显示为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>
我猜您缺少实现您想要在中间插入任何字符的情况。当我查看您的代码时,新输入的字符被添加到仅限的末尾
// Add the character
$write.val($write.val() + character);
相关文章:
- 将文本插入光标所在的文本区域
- 从 AngularJS 将文本插入 HTML
- 如何在 javascript 中使用 .html() 将 html 作为文本插入
- 如何将文本插入到几个带有 id 的文本区域中的一个文本区域中
- 如何在javascript中通过文本输入键调用函数
- 将文本插入<text区域>
- 如何将翻译后的文本插入数据库 php
- 插入键=>来自提交的Javascript对象的PHP中的值对
- 在 JavaScript 中,将文本插入字符串的最简单方法是什么?
- 将文本插入到其他页面上的文本区域中
- 如何将文本插入到由 raphaeljs 创建的节点中
- 循环遍历 JSON,在对象之间插入键/值
- 纯Javascript将文本插入中,不带属性
- Chrome 扩展程序:点击弹出窗口中的按钮时,将文本插入文本字段
- 通过查询将文本插入文本区域
- 单击链接并将隐藏字段中的文本插入输入字段超过 1 次,然后替换输入字段中的文本
- 使用 jQuery/Javascript 将鼠标悬停在按钮上时将文本插入文本和帮助文本
- 需要解决方案在 NicEdit 将 HTML 文本插入实例
- 在数组中插入键和对象
- 如何将HTML文本插入jQuery