Create a backspace button for html/javascript-based textarea

Question

I have a created a virtual keyboard to decipher a puzzle code on a html/java page, however I am unable to work out how to add a backspace or linebreak button to avoid having to mouseclick the textarea to backspace every time a single mistake is made or need a new line.

Code for the page is added below, any ideas to do this as simply as possible would be greatly appreciated, as I'm still learning Javascript and havent quite got my head around some events yet.

Thanks in advance.

<!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>

Off topic: I would recommend to use this in your CSS: input {font-family: 'wingdings';} it cleans up a lot. — Evochrome
– Evochrome, Commented Aug 6, 2015 at 18:33
Originally tried that, but the full page uses multiple fonts and it ended up a mess. Thanks for the suggestion though. — Steve
– Steve, Commented Aug 6, 2015 at 19:51

Hayden Schiff · Accepted Answer · 2015-08-06 18:29:49Z

5

The backspace key should just chop off the last character of the textarea right? So, just make the backspace key set the textarea's value to the textarea's value minus the last character using JavaScript's substring method. Here's some pseudocode:

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

answered Aug 6, 2015 at 18:29

Hayden Schiff

3,33022 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DaniFoldi · Accepted Answer · 2015-08-06 18:35:01Z

2

Inserting a new line is just as simple as 1+1. Just put \\\n into the code.

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

answered Aug 6, 2015 at 18:35

DaniFoldi

4514 silver badges14 bronze badges

1 Comment

DaniFoldi Over a year ago

Off topic: You have two buttons with the value of 'A'.

Manish Sharma · Accepted Answer · 2020-10-09 02:12:19Z

-1

<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">

answered Oct 9, 2020 at 2:12

Manish Sharma

1

2 Comments

Manish Sharma Over a year ago

check my second answer. I made a few mistakes in this

Hoppeduppeanut Over a year ago

Just a note for next time, you can edit your answers by clicking the "edit" link just below the text in your answer. Seems you've already posted a new answer, you should delete this one by clicking the "delete" link.

Manish Sharma · Accepted Answer · 2020-10-09 02:15:47Z

-1

<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>

answered Oct 9, 2020 at 2:15

Manish Sharma

1

1 Comment

Manish Sharma Over a year ago

make sure your input type is always text

Ruben · Accepted Answer · 2022-02-02 14:16:13Z

-2

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>

answered Feb 2, 2022 at 14:16

Ruben

1

Collectives™ on Stack Overflow

Create a backspace button for html/javascript-based textarea

5 Answers 5

Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related