CODEWITHSUNDEEP
javascriptjqueryhtmldom
Brandon
Brandon

Reputation: 14196

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

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?

Upvotes: 5

Views: 13388

Answers (4)

mohdajami
mohdajami

Reputation: 9680

Pure Javascript implementation, onClick

var text = document.getElementById(myTxtBox).value;  
text = text.substr(0,text.length-1);
document.getElementById(myTxtBox).value = text;

Upvotes: 1

Geuis
Geuis

Reputation: 42277

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.

Upvotes: 3

Michael Low
Michael Low

Reputation: 24506

jQuery plugin to simulate a backspace in a text field, works in IE, FF, Chrome (based on code from here).

jQuery.fn.extend({
backspaceAtCaret: function(){
  return this.each(function(i) {    

    if (document.selection) 
    {
        this.focus();
        sel = document.selection.createRange();
        if(sel.text.length > 0)
        {
            sel.text="";
        }
        else
        {
            sel.moveStart("character",-1);
            sel.text="";
        }
        sel.select();
    }
    else if (this.selectionStart || this.selectionStart == "0")
    { 
        var startPos = this.selectionStart;
        var endPos = this.selectionEnd;

        this.value = this.value.substring(0, startPos-1) + this.value.substring(endPos, this.value.length);
        this.selectionStart = startPos-1;
        this.selectionEnd = startPos-1;
        this.focus();
    } 
    else 
    {
        this.value=this.value.substr(0,(this.value.length-1));
        this.focus();
    }
  })
}
});

Upvotes: 0

Douwe Maan
Douwe Maan

Reputation: 6878

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

Upvotes: 6

Related Questions