0
Funktionalität:Einsatz Tastatur Zeichenwert in Mitte Text in Eingabe Textbox
Benutzer kann ein char var in das Texteingabefeld über eine Bildschirm-Tastatur Javascript.
Was getan wurde:
ich die JavaScript-Tastatur erstellt haben. Haben auch das Eingabetextfeld erstellt und auch den Methodenaufruf erstellt, um das Zeichen in das Textfeld hinzuzufügen, wenn ein Schlüssel auf der Javascript-Tastatur geklickt wurde.
Ausgabe:
Das Problem tritt auf, wenn ich ein Zeichen in der Mitte des Textes einfügen versuche, wird das Zeichen erst am Ende des Textes hinzugefügt werden, anstatt eingefügt, wo ich angeklickt.
Bedeutung: Für das Wort, TEST.Wenn ich versuchen würde, das Zeichen 'E' zwischen 'E' und 'S' einzufügen, wird es als TEST anstelle von TEEST angezeigt.
Ich möchte um Hilfe bitten, da ich mir nicht sicher bin, was ich verpasst habe..danke.
Code:
//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>
Mögliches Duplikat [Text in Textfeld an der Cursorposition (Javascript)] (http://stackoverflow.com/ Fragen/11076975/insert-text-in-textarea-bei-cursor-position-javascript) – Tomboyo
@Tomboyo keine der Lösung hilft tatsächlich – Luke
Ihre Frage ist, wie Sie Text an der Cursorposition in einem Element einfügen, das ist genau die Frage der SO-Thread, den ich zitiert habe. Wie Kimdung darauf hingewiesen hat, funktioniert Ihr Ansatz nicht, weil '$ write.val ($ write.val() + character);' lediglich ein Zeichen an den Wert des Elements anhängt. Sie sollten in der Lage sein, das zu erreichen, was Sie wollen, indem Sie die in diesem Link beschriebenen Tools zur Bereichsselektion anstelle des aktuell vorhandenen Append-Codes implementieren. – Tomboyo