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?
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?
Share Improve this question edited Nov 14, 2009 at 20:39 Shog9 160k36 gold badges235 silver badges240 bronze badges asked Nov 14, 2009 at 20:36 BrandonBrandon 14.2k17 gold badges78 silver badges115 bronze badges 1- Im not sure it can be done that way, since the textfield will lose focus when pressing the button, so how would you know where the cursor was. Except if you are tracing it while typing – mohdajami Commented Nov 14, 2009 at 20:53
4 Answers
Reset to default 6This 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')
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.
Pure Javascript implementation, onClick
var text = document.getElementById(myTxtBox).value;
text = text.substr(0,text.length-1);
document.getElementById(myTxtBox).value = text;
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();
}
})
}
});