为 html/javascript-based textarea 创建一个退格按钮

Question

我创建了一个虚拟键盘来破译 html/java 页面上的拼图代码，但是我无法弄清楚如何添加退格键或换行符按钮以避免必须通过鼠标单击文本区域来退格键每次犯错或需要换行。

下面添加了该页面的代码，任何尽可能简单地执行此操作的想法将不胜感激，因为我仍在学习 Javascript 并且还没有完全了解一些事件。

提前致谢。

<!DOCTYPE HTML>
 <HTML>
 <head>
<!--JQuery activation-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<div class="container-fluid">
<div class="col-md-8">

<div id="letters">
<!-- PLCKFBG HMOERJ AQNXYIZ VWSUT,.123456789O (and space) cypher alphabet-->
<input type="submit" style="font-family:'Wingdings'" value="P" style="width:100%"  id="A" />
<input type="submit" style="font-family:'Wingdings'" value="L" style="width:100%"  id="B" />
<input type="submit" style="font-family:'Wingdings'" value="C" style="width:100%"  id="C" />
<input type="submit" style="font-family:'Wingdings'" value="K" style="width:100%"  id="D" />
<input type="submit" style="font-family:'Wingdings'" value="F" style="width:100%"  id="E" />
<input type="submit" style="font-family:'Wingdings'" value="B" style="width:100%"  id="F" />
<input type="submit" style="font-family:'Wingdings'" value="G" style="width:100%"  id="G" />
<input type="submit" style="font-family:'Wingdings'" value="D" style="width:100%"  id="H" />
<input type="submit" style="font-family:'Wingdings'" value="H" style="width:100%"  id="I" />
<input type="submit" style="font-family:'Wingdings'" value="M" style="width:100%"  id="J" />
<input type="submit" style="font-family:'Wingdings'" value="O" style="width:100%"  id="K" />
<input type="submit" style="font-family:'Wingdings'" value="E" style="width:100%"  id="L" />
<input type="submit" style="font-family:'Wingdings'" value="R" style="width:100%"  id="M" />
<input type="submit" style="font-family:'Wingdings'" value="J" style="width:100%"  id="N" />
<input type="submit" style="font-family:'Wingdings'" value="A" style="width:100%"  id="O" />
<input type="submit" style="font-family:'Wingdings'" value="Q" style="width:100%"  id="P" />
<input type="submit" style="font-family:'Wingdings'" value="N" style="width:100%"  id="Q" />
<input type="submit" style="font-family:'Wingdings'" value="X" style="width:100%"  id="R" />
<input type="submit" style="font-family:'Wingdings'" value="Y" style="width:100%"  id="S" />
<input type="submit" style="font-family:'Wingdings'" value="I" style="width:100%"  id="T" />
<input type="submit" style="font-family:'Wingdings'" value="Z" style="width:100%"  id="U" />
<input type="submit" style="font-family:'Wingdings'" value="V" style="width:100%"  id="V" />
<input type="submit" style="font-family:'Wingdings'" value="W" style="width:100%"  id="W" />
<input type="submit" style="font-family:'Wingdings'" value="S" style="width:100%"  id="X" />
<input type="submit" style="font-family:'Wingdings'" value="U" style="width:100%"  id="Y" />
<input type="submit" style="font-family:'Wingdings'" value="T" style="width:100%"  id="Z" />
<input type="submit" style="font-family:'Wingdings'" value="." style="width:100%"  id="." />
<input type="submit" style="font-family:'Wingdings'" value="," style="width:100%"  id="," />
<input type="submit" style="font-family:'Wingdings'" value="1" style="width:100%"  id="1" />
<input type="submit" style="font-family:'Wingdings'" value="2" style="width:100%"  id="2" />
<input type="submit" style="font-family:'Wingdings'" value="3" style="width:100%"  id="3" />
<input type="submit" style="font-family:'Wingdings'" value="4" style="width:100%"  id="4" />
<input type="submit" style="font-family:'Wingdings'" value="5" style="width:100%"  id="5" />
<input type="submit" style="font-family:'Wingdings'" value="6" style="width:100%"  id="6" />
<input type="submit" style="font-family:'Wingdings'" value="7" style="width:100%"  id="7" />
<input type="submit" style="font-family:'Wingdings'" value="8" style="width:100%"  id="8" />
<input type="submit" style="font-family:'Wingdings'" value="9" style="width:100%"  id="9" />
<input type="submit" style="font-family:'Wingdings'" value="A" style="width:100%"  id="O" />
<input type="submit" style="font-family:'Copperplate'" value="[Space]" style="width:100%"  id=" " />
</div>
</div>

<div class="col-md-4">

<!-- Clear button -->
<div id="clearbutton">   
<input type="button" value="Clear" onclick="javascript:eraseText();"> 
</div>

<!-- textarea "translation"-->
<textarea id="translation" class="form control ChangeMe" name="translation" rows=10 cols=50 placeholder="Common Translation"></textarea>
</div>
</div>


<script>
// code for letter translation
$(document).ready(function(){
  var txt=$('#translation');
  $("#letters").on('click','input',function() {
    txt.val(txt.val()+this.id);
  });
 });


//Clear Button Function 
function eraseText() {
document.getElementById("translation").value = "";
}

//disable backspace outside of text boxes
$(document).keydown(function (e) {
                var element = e.target.nodeName.toLowerCase();
                if ((element != 'input' && element != 'textarea') || $(e.target).attr("readonly") || (e.target.getAttribute("type") ==="checkbox")) {
                    if (e.keyCode === 8) {
                    return false;
                    }
                }
});
</script>
</body>
</html>

Answer 1

退格键应该只是截掉文本区域的最后一个字符吧？因此，只需使用退格键将文本区域的值设置为文本区域的值减去最后一个字符，使用 JavaScript's substring method. Here's some pseudocode:

function onPressBackspace() {
    myTextarea.value = myTextarea.value.substring(0, myTextarea.value.length - 1);
}

Answer 2

换行就像1+1一样简单。只需将 \\n 放入代码中即可。

$("newLineButton").on("click",function(){
$("#translation").text()=$("#translation").text()+"\\n";
});

Answer 3

<DOCTYPE html>
  <html>
    <head>
        <script>
            function backSpace() {
                var bsp = document.getElementById("ns").value;
                document.getElementById("ns").value=bsp.substring(0,bsp.length -1);
            }
       </script>
   </head>
<body>
<input type="text" id="ns">

Answer 4

<DOCTYPE html>
    <html>
        <head>
            <script>
                function backSpace() {
                    var bsp = document.getElementById("ns").value;
                    document.getElementById("ns").value=bsp.substring(0,bsp.length-1);
                }
            </script>
        </head>
<body>
    <input type="text" id="ns" onClick="backSpace()">
</body>
</html>

Answer 5

const backSpace=document.getElementById('backSpace')
const textBox=document.getElementById('textBox')

backSpace.addEventListener('click',function(){
textBox.value = textBox.value.substring(0, textBox.value.length-1)
})

<html>
<head>
<title>Document</title>
</head>
<body>
<button id="backSpace">BackSpace</button>
<input type="text" name="textBox" id="textBox">
</body>
</html>

为 html/javascript-based textarea 创建一个退格按钮

Create a backspace button for html/javascript-based textarea

html

javascript

button

backspace