1
ナビゲーションコントロールボタンをHTMLテキストエリアボックスに配置しようとしています。バックパースはうまく動作します。エンド、ホーム、スペースのボタンも同様です。左ボタンと右ボタンは、ボタンをクリックするたびに2文字ずつジャンプし続けます。質問を投稿する前に、解決策を見つけるために頭を2日間叩いています。これはJSFiddleためのリンクです：次のように[]（https://jsfiddle.net/ChemistryOfMath/uuchyfg0/8/）https://jsfiddle.net/ChemistryOfMath/uuchyfg0/8/
HTMLコードは次のとおりです。HTML Texeare左、右、下、上、ホーム、および終了仮想ボタンを使用したキャレットコントロール
<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>
gaemafとGarric15の両方に感謝します。これは機能します。イベントの伝播は私の他の学習ステップです。私は迅速な対応に感謝します。 –