How to simulate the backspace key being pressed in JavaScript or jQuery

Question

I have spent an hour reading a million different posts and can't get a winner. Simply put. I have created an on-screen keyboard. When a user presses a letter button, the letter is inserted at the carat in the input that has focus. This all works fine and I know how to insert all the letters and numbers and spaces but I can't figure out how to backspace at the carat. I know how to take the last character off but that is not effective as I wish it to backspace at the carat.

I will insert the code to show how it is set up... The only part that does not work is the lines in the if ($(this).html() == 'BKSP') block.

PLEASE and THANKS!

function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
      myField.focus();
      sel = document.selection.createRange();
      sel.text = myValue;
  }
  //MOZILLA and others
  else if (myField.selectionStart || myField.selectionStart == '0') {
      var startPos = myField.selectionStart;
      var endPos = myField.selectionEnd;
      myField.value = myField.value.substring(0, startPos)
          + myValue
          + myField.value.substring(endPos, myField.value.length);
      myField.selectionStart = startPos + myValue.length;
      myField.selectionEnd = startPos + myValue.length;
  } else {
      myField.value += myValue;
  }
}

$("#keyboard").on("pointerdown", function(e){
  e.preventDefault();
});

$(".sm-kb-btn").on("pointerdown", function (e) {
  if ($(this).html() == 'BKSP') {
    var e = new Event("keydown");
    e.key = "Backspace";
    e.code = "Backspace";
    document.getElementById("search-box-input").dispatchEvent(e);
  }
  else {
    insertAtCursor(document.getElementById("search-box-input"), $(this).html());
  }

})

Answer 1

The browser and javascript have limits when it comes to accessing to device hardware, for sercurity reasons. You can throw a keydown event, but it won't perform the same action as physically pressing a key.

If you're goal is just maintaining the caret position, you can set that using selection.setSelectionRange(caret_position, caret_position)

https://developer.mozilla.org/en-US/docs/Web/API/Selection

Set keyboard caret position in html textbox

Here's a demo:

let output = document.querySelector('input');

document.querySelector('.buttons').addEventListener('click', function(e){
  if (e.target.nodeName === 'BUTTON') {
    let caret_position = output.selectionStart || 0, //current caret position
        character = e.target.textContent, //button / key pressed
        new_caret_position = Math.max(0, caret_position + (character === 'BKSP' ? -1 : 1));
        //if BKSP, move caret -1, else move caret +1. also make sure it's >= 0
        

    if (character === 'BKSP'){ //remove character preceding current caret position
      output.value = output.value.substr(0, new_caret_position) + output.value.substr(caret_position);
    } else { //insert character at current character position
      output.value = output.value.substr(0, caret_position) + character + output.value.substr(caret_position);

    }
      //reset the caret position after modifying output.value
      output.setSelectionRange(new_caret_position, new_caret_position);
  }      
});

button{
  height: 24px;
  margin: 16px 4px; 
}

<input>

<div class="buttons">
  <button>Q</button>
  <button>W</button>
  <button>E</button>
  <button>R</button>
  <button>T</button>
  <button>Y</button>
  <button>BKSP</button>
</div>