How might I simulate a backspace action in a text field?

Question

When a button is pressed, I simply want to simulate a "backspace" in a regular text box, deleting the character to the left of the cursor.

Google and various forums are producing really random results on this. What's the proper way to do this?

Answer 1

This seems to work in Safari (and probably Firefox too), but I haven't tested it in IE:

  function backspaceAtCursor(id)
  {
    var field = document.getElementById(id);

    if(field.selectionStart)
    {
      var startPos = field.selectionStart;
      var endPos = field.selectionEnd;

      if(field.selectionStart == field.selectionEnd)
      {
        field.value = field.value.substring(0, startPos - 1) + field.value.substring(endPos, field.value.length);

        field.focus(); 
        field.setSelectionRange(startPos - 1, startPos - 1); 
      }
      else
      {
        field.value = field.value.substring(0, startPos) + field.value.substring(endPos, field.value.length);

        field.focus(); 
        field.setSelectionRange(startPos, startPos); 
      }
    }
  }

Use: backspaceAtCursor('elementid')

Answer 2

So I'm guessing that you don't mean to put focus on the text input to delete it.

There are a couple of methods you could try. First, get the current contents of the input and remove the last character, then put the modified string back. For example (this code should work):

var txt = $('#myinputtextbox');
txt.val(txt.val().slice(0, -1));

The other would be to use js to simulate the backspace character key being hit. You would need to focus on the input, move the cursor to the end of the line, and then trigger the character.