0
işlevsellik:insert klavye karakter değeri
Kullanıcı girebilirsiniz bir ekran JavaScript klavye ile giriş metin kutusuna bir karakter var. yapıldığını Ne
: Ben javascript klavye oluşturduk
. Girdi metin kutusu ve da oluşturdu, ayrıca javascript klavyede bir tuşa tıklandığında metin kutusuna char eklemek için yöntem çağrısı oluşturdu.
Sayı: Ben metnin ortasında bir char eklemeye çalışıyorum vermesiyle mesele olur
, karakter yalnızca metnin sonunda eklenecektir yerine ben nerede takılı tıklandı.
Anlamı: Kelime için TEST.If 'E' ve 'S' arasında char 'E' yerleştirmeye çalışacaktım, TEEST yerine TESTE olarak görüntülenecektir.
Neler kaçırdığımı bildiğimden emin olmak için bu konuda yardım isterim. Teşekkürler.
Kodu:
//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>
Olası kopyalar http://stackoverflow.com/ sorular/11076975/insert-text-içine-textarea-at-imleç-pozisyon-javascript) – Tomboyo
@Tomboyo çözümün hiçbiri gerçekten – Luke
yardımcı olur. Sorunuz bir öğede imleç konumunda metin eklemek nasıl, tam olarak soru sola atladığım adresler. Kimdung'un belirttiği gibi, yaklaşımınız çalışmıyor çünkü $ write.val ($ write.val() + karakter), 'sadece öğenin değerine bir karakter ekler. Şu anda sahip olduğunuz eklenti kodu yerine o bağlantıda özetlenen aralık seçim araçlarını uygulayarak istediğinizi gerçekleştirebilmelisiniz. – Tomboyo