HTML Texeare插入符號控件，使用左，右，下，上，主頁和結束虛擬按鈕
[英]HTML Texeare caret control using left, right, down, up, home and end virtual buttons
問題描述
我正在嘗試在HTML文本框上放置導航控制按鈕。到目前為止，該選項卡工作正常。 Backapace工作正常。 “結束”，“主頁”和“空格”按鈕也是如此。 每次單擊按鈕時，向左和向右按鈕都會持續跳兩個字符。在決定發布問題之前，我一直想着找到解決方法的過程已經兩天了。 這是JSFiddle的鏈接：[]（ https://jsfiddle.net/ChemistryOfMath/uuchyfg0/8/ ） https://jsfiddle.net/ChemistryOfMath/uuchyfg0/8/
HTML代碼如下：
<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script> <title>Test Caret</title> <style type="text/css"> #txtarea { display: block; padding: 5px; width: 200px; height: 100px; font: 1em, Verdana, Sans-Serif; background: #fff; border: 1px solid #486787; margin-left: 40px; } #kbdFrame { float: left; } ul li { white-space: nowrap; overflow: hidden; list-style-type: none; display: inline-block; border: 1px solid #111db3; margin: 2px; color: #000; border-radius: 5px; box-sizing: border-box; text-align: center; overflow: hidden; cursor: pointer; font-family: arial, sans-serif; font-size: 15px; width: 45px; height: 45px; line-height: 45px; } #left, #up, #right, #down { color: red; } </style> <script type="text/javascript"> $(document).ready(function() { var e = document.getElementById('txtarea'); e.focus(); var character; /**===FUNCTIONs=======================*/ BACKSPACE = function() { character = ""; var pos = e.selectionStart; if (e.selectionStart == e.selectionEnd) { e.value = e.value.substr(0, e.selectionStart - 1) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos - 1; e.selectionEnd = pos - 1; } else { // replace selected text e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos; e.selectionEnd = pos; } } TAB = function() { var pos = e.selectionEnd character = "\\t" e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos + 1; e.selectionEnd = pos + 1; } LEFT = function() { //character = "" e.selectionStart = e.selectionEnd -= 1; } RIGHT = function() { //character = "" e.selectionStart = e.selectionEnd += 1; } DOWN = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, prevLine = e.value.lastIndexOf('\\n', pos), nextLine = e.value.indexOf('\\n', pos + 1); if (nextLine === -1) return; pos = pos - prevLine; e.selectionStart = e.selectionEnd = nextLine + pos; } UP = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, prevLine = e.value.lastIndexOf('\\n', pos), TwoBLine = e.value.lastIndexOf('\\n', prevLine - 1); if (prevLine === -1) return; pos = pos - prevLine; e.selectionStart = e.selectionEnd = TwoBLine + pos; } HOME = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionEnd = e.selectionStart = e.value.lastIndexOf( '\\n', e.selectionEnd - 1 ) + 1; } END = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, i = e.value.indexOf('\\n', pos); if (i === -1) i = e.value.length; e.selectionStart = e.selectionEnd = i; } SPACE = function() { var x = e.selectionStart character = " " character = e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos + 1; e.selectionEnd = pos + 1; } /**===Buttons=======================*/ $(".keyboard").click(function(evt) { $("#txtarea").focus(); var mykeyID = evt.target.id; var character = $(evt.target).text(); switch (mykeyID) { case "tab": //$("#txtarea").focus(); TAB(); break; case "space": SPACE(); break; case "bkSp": BACKSPACE(); break; case "left": LEFT(); //$("#txtarea").focus(); break; case "right": RIGHT(); //$("#txtarea").focus(); break; case "down": DOWN(); //$("#txtarea").focus(); break; case "up": UP(); //$("#txtarea").focus(); break; case "home": HOME(); //$("#txtarea").focus(); break; case "end": END(); //$("#txtarea").focus(); break; default: character = e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); //e.selectionStart = 0; //e.selectionEnd = 0; $("#txtarea").val(character); break; } }); }); </script> </head> <body> <textarea type="text" name="txtarea" id="txtarea">Testing the right and left buttons. Please help.</textarea> <div class="" id="kbdFrame"> <ul class="keyboard" id=""> <ul id="rOne"> <li class="key" id="tab">Tab</li> <li class="key" id="up">Up</li> <li class="key" id="bkSp">←</li> </ul> <ul class="keyboard" id="rSix"> <li class="key" id="left">Left</li> <li class="key" id="home">Home</li> <li class="key" id="right">Right</li> </ul> <ul class="keyboard kbdR7" id="rSeven"> <li class="key" id="space">Space</li> <li class="key" id="down">Down</li> <li class="key" id="end">End</li> </ul> </ul> </div> </body> </html>
2 個解決方案
解決方案1
2 已采納 2016-04-07 21:35:50
(".keyboard").click()被觸發兩次。 為什么呢 由於該按鈕是在ul與keyboard類本身是一個誰ul與keyboard類。
<ul class="keyboard" id="">
[...]
<ul class="keyboard" id="rSix">
<li class="key" id="left">Left</li>
<li class="key" id="home">Home</li>
<li class="key" id="right">Right</li>
</ul>
[...]
</ul>
因此觸發器執行了2次。 刪除第一個鍵盤類： JSFiddle
解決方案2
0 2016-04-07 21:34:38
您的問題是事件委托。 有關詳細信息，您可以看一下事件委托
此問題取決於事件處理：
$(".keyboard").click(function(evt) {
和html來源：
<ul class="keyboard" id="">
在另一個里面：
<ul class="keyboard" id="rSix">
這意味着：每當您單擊“ .keyboard”時，以下處理程序：
$(".keyboard").click(function(evt) {
接收兩個事件，以下兩個元素各一個（按順序）：
<ul class="keyboard" id="rSix">
並緊接着彼此：
<ul class="keyboard" id="">
避免此問題的一種可能解決方案是停止事件冒泡，並調用以下代碼行：
evt.stopPropagation();
作為點擊處理程序的第一行。
另一個解決方案是使用不同的事件委托：
$(".keyboard li").click(function(evt) {
在以下代碼段中，正確的代碼：
$(function () { var e = document.getElementById('txtarea'); e.focus(); var character; /**===FUNCTIONs=======================*/ BACKSPACE = function() { character = ""; var pos = e.selectionStart; if (e.selectionStart == e.selectionEnd) { e.value = e.value.substr(0, e.selectionStart - 1) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos - 1; e.selectionEnd = pos - 1; } else { // replace selected text e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos; e.selectionEnd = pos; } } TAB = function() { var pos = e.selectionEnd character = "\\t" e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos + 1; e.selectionEnd = pos + 1; } LEFT = function() { //character = "" e.selectionStart = e.selectionEnd -= 1; } RIGHT = function() { //character = "" e.selectionStart = e.selectionEnd += 1; } DOWN = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, prevLine = e.value.lastIndexOf('\\n', pos), nextLine = e.value.indexOf('\\n', pos + 1); if (nextLine === -1) return; pos = pos - prevLine; e.selectionStart = e.selectionEnd = nextLine + pos; } UP = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, prevLine = e.value.lastIndexOf('\\n', pos), TwoBLine = e.value.lastIndexOf('\\n', prevLine - 1); if (prevLine === -1) return; pos = pos - prevLine; e.selectionStart = e.selectionEnd = TwoBLine + pos; } HOME = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionEnd = e.selectionStart = e.value.lastIndexOf( '\\n', e.selectionEnd - 1 ) + 1; } END = function() { //character = "" //e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); var pos = e.selectionEnd, i = e.value.indexOf('\\n', pos); if (i === -1) i = e.value.length; e.selectionStart = e.selectionEnd = i; } SPACE = function() { var x = e.selectionStart character = " " character = e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); e.selectionStart = pos + 1; e.selectionEnd = pos + 1; } /**===Buttons=======================*/ $(".keyboard").click(function(evt) { // FIX evt.stopPropagation(); $("#txtarea").focus(); var mykeyID = evt.target.id; var character = $(evt.target).text(); switch (mykeyID) { case "tab": //$("#txtarea").focus(); TAB(); break; case "space": SPACE(); break; case "bkSp": BACKSPACE(); break; case "left": LEFT(); //$("#txtarea").focus(); break; case "right": RIGHT(); //$("#txtarea").focus(); break; case "down": DOWN(); //$("#txtarea").focus(); break; case "up": UP(); //$("#txtarea").focus(); break; case "home": HOME(); //$("#txtarea").focus(); break; case "end": END(); //$("#txtarea").focus(); break; default: character = e.value = e.value.substr(0, e.selectionStart) + character + e.value.substr(e.selectionEnd, e.value.length); //e.selectionStart = 0; //e.selectionEnd = 0; $("#txtarea").val(character); break; } }); });
#txtarea { display: block; padding: 5px; width: 200px; height: 100px; font: 1em, Verdana, Sans-Serif; background: #fff; border: 1px solid #486787; margin-left: 40px; } #kbdFrame { float: left; } ul li { white-space: nowrap; overflow: hidden; list-style-type: none; display: inline-block; border: 1px solid #111db3; margin: 2px; color: #000; border-radius: 5px; box-sizing: border-box; text-align: center; overflow: hidden; cursor: pointer; font-family: arial, sans-serif; font-size: 15px; width: 45px; height: 45px; line-height: 45px; } #left, #up, #right, #down { color: red; }
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <textarea type="text" name="txtarea" id="txtarea">Tab works fine. The backapace works fine. So do the end, home and space buttons. the LEFT and RIGHT buttons keep jumping TWO characters. Please help.</textarea> <div class="" id="kbdFrame"> <ul class="keyboard" id=""> <ul id="rOne"> <li class="key" id="tab">Tab</li> <li class="key" id="up">Up</li> <li class="key" id="bkSp">←</li> </ul> <ul class="keyboard" id="rSix"> <li class="key" id="left">Left</li> <li class="key" id="home">Home</li> <li class="key" id="right">Right</li> </ul> <ul class="keyboard kbdR7" id="rSeven"> <li class="key" id="space">Space</li> <li class="key" id="down">Down</li> <li class="key" id="end">End</li> </ul> </ul> </div>
使用上，下，左和右鍵在javascript中移動對象
[英]Making an object move in javascript using up, down, left and right keys
使用引導程序，使幻燈片向上或向下滾動，而不是向左或向右滾動
[英]Using bootstrap，make slide to scroll up and down, not left or right
單擊向上\\向下\\向左\\向右按鈕時如何在div中移動圓圈
[英]How to move circle in a div when clicking the buttons up\down\left\right
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.