如何在跨度中将输入的文本包装在可内容编辑的元素中？

Question

I have a div that has "contenteditable" set to true.

I now want any newly inputted text to be wrapped in a span. Meaning I can highlight the edited text.

Here is where I'm at at the moment - http://jsfiddle.net/ug4xr9x0/

HTML

<div contenteditable="true" id="myContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit tincidunt leo, non volutpat lectus sodales non. Phasellus id felis ultrices, egestas enim nec, ornare quam. Ut at posuere felis, vitae sodales risus. Suspendisse velit nibh, facilisis et ante et, vehicula facilisis velit.</div>

Javascript

document.getElementById('myContent').addEventListener('keydown',function(evt){
    var range = window.getSelection().getRangeAt(0);
    if(range.startContainer.parentNode.className!=='highlight'){
        var newElement = document.createElement('span');
        newElement.className = 'highlight';
        newElement.innerHTML = String.fromCharCode(evt.which);
        range.insertNode(newElement);
        range.setStartAfter(newElement);
        evt.preventDefault();
    }
});

CSS

.highlight{
    background-color:yellow;
}

This wraps the span around the character but it doesn't move the caret into the span, resulting in backwards typing. I'm not at all certain that keydown is the appropriate event to listen to, or even that blocking the keypress and inserting an element is correct. The line range.setStartAfter was an attempt to move the caret along, but it behaves the same with or without it.

I also want any selected text to be deleted when they start typing which isn't happening at the moment.

Any help would be much appreciated. Thanks.

Answer 1

onkeydown is suitable for this, though oninput would be even better, but it doesn't fire on contenteditables in all browsers. Also when you want to add an element, inserNode is an apppropriate method to do it. setStartAfter is just for the task you've used it, though it can be done with range.collapse() as well.

Problems start when setting content to the newly-created span with newElement.innerHTML = String.fromCharCode(evt.which); . The inserted text isn't necessarily what user has intended to enter.

This snippet is just slightly modified from your code, but it shows the text user has entered.

document.getElementById('myContent').addEventListener('keydown', function (evt) {
    var range = window.getSelection().getRangeAt(0),
        modifiers = [8, 13, 37, 38, 39, 40, 46], // List of keys, which should not prevent the default action
        newElement, chr;
    if (range.startContainer.parentNode.className !== 'highlight') {
        if (modifiers.indexOf(evt.which) < 0) {
            newElement = document.createElement('span');
            newElement.className = 'highlight';
            range.deleteContents(); // This deletes the content of the selection
            chr = evt.key || evt.char; // Gets the entered real character
            if (chr.length < 2) { // Excludes "modifiers" like SHIFT and CTRL etc.
                newElement.textContent = chr;
            }
            range.insertNode(newElement);
            range.collapse(); // Collapses the range to end
            evt.preventDefault();
        }
    }
});

A live demo at jsFiddle .

There seems to be a drawback in this code. Every entered character creates a new span , unless you really write to a span .

Answer 2

I've managed to get this going in Chrome and Firefox now. Here are the modifications

document.getElementById('myContent').addEventListener('keypress',function(evt){
    var range = window.getSelection().getRangeAt(0),
        modifiers = [0,8]; // List of keys to ignore (0 is arrows & 8 is delete in firefox)

    if(range.startContainer.parentNode.className!=='highlight' && modifiers.indexOf(evt.which) <  0){
        if(!range.collapsed){
            range.deleteContents();
        }
        var el =  document.createElement('span');
        el.appendChild(document.createTextNode('A'));
        el.className = 'highlight';
        range.insertNode(el);

        var sel = window.getSelection();        
        range.setStartBefore(el.childNodes[0]);
        range.setEndAfter(el.childNodes[0]);
        sel.removeAllRanges();
        sel.addRange(range);
    }
});

And the fiddle http://jsfiddle.net/ug4xr9x0/8/

"keypress", as opposed to "keydown", stops the arrow keys etc firing in chrome, firefox needed to ignore the "evt.which" property at 0 & 8.

Is inserts a span with a textnode containing the letter 'A'. I then set the range to wrap that node using setStartBefore & setEndAfter and update the window selection using addRange. The textnode 'A' gets overwritten (no need for prevent default).

I'm sure there is a more elegant way to achieve this, but it works for me.

Thanks for your help.