QUESTION
Does anybody know how to use range.setStart in the same way as range.moveStart works in IE? I'd like to implement backspace/delete in JS, something like this:
range.moveStart('character',-1); range.deleteContents();
but in Firefox
ANSWER
Firefox, along with all modern browsers except IE <= 8 uses DOM Ranges. There's no direct analogue to the moveStart
method of IE's TextRange
and it's tricky to do in the general case. If the range is within a text node and not at the start, it's easy; otherwise you'll need to walk backwards in the document to find the preceding text node and move the range into it. The following only works within a single text node:
function backspace(){
var sel = window.getSelection();
// If there is a selection rather than a caret, just delete the selection
if(!sel.isCollapsed){
sel.deleteFromDocument();
}elseif(sel.rangeCount){
var range = sel.getRangeAt(0);
if(range.startContainer.nodeType ==3&& range.startOffset >0){
range.setStart(range.startContainer, range.startOffset -1);
sel.removeAllRanges();
sel.addRange(range);
sel.deleteFromDocument();
}
}
}
WebKit and Firefox 4 have the modify method of Selection
objects which solves the problem completely:
function backspace2(){
var sel = window.getSelection();
// If there is a selection rather than a caret, just delete the selection
if(!sel.isCollapsed){
sel.deleteFromDocument();
}elseif(sel.rangeCount && sel.modify){
sel.modify("extend","backward","character");
sel.deleteFromDocument();
}
}