Change colour of text on keydown up to space

Question

I have a contenteditable div. What I'm trying to do is make it so that if the user types the @ symbol, it (on keypress) changes the colour of the text (including the @ symbol) until the next space.

For example, imagine that the bold text is the coloured text:

"Here is some @sample text."

Here's the JSFiddle I started, but I don't know how to carry on from it: http://jsfiddle.net/p8WsT/4/

HTML:

<div class="typeable" contenteditable="true">Type "@test" after this text: </div>

JS:

$(document).on("keydown", ".typeable", function(event) {
    event.preventDefault();

    var code = event.keyCode; // code 50 is @
});

Please help!

The answers for this similar question can help you: http://stackoverflow.com/questions/13107150/jquery-javascript-syntax-highlighting-as-user-types-in-contenteditable-region — Eduardo Lopes, Jun 24 '14 at 00:38
@user3739658 Share what you've got so far, maybe someone else can work off it. — , Jun 24 '14 at 00:42

score 0 · Answer 1 · answered Jun 24 '14 at 01:58

Here's a really simple example thrown together to help you get started: http://jsfiddle.net/wB6k5/

It uses selection and range to select words and then I run execCommand on the selection.

MDN Selection
MDN execCommand

There's an event listener on the key up event to check to see if we need to run the highlight function.

var userPressedAt = false;

function highlight() {
    var el = $('.typeable')[0],
        str = $('.typeable').text(),
        range = document.createRange(),
        sel = window.getSelection(),
        start,
        end;

    start = str.lastIndexOf('@');
    end = str.length;

    // Assumes single line
    range.setStart(el.childNodes[0], start);
    range.setEnd(el.childNodes[0], end);

    sel.addRange(range);

    el.focus();

    document.execCommand('foreColor', false, 'red');

}

function highlighter(e) { console.log(e.which);
    // user typed @ - wait for space to highlight
    if (e.which === 64) {
        userPressedAt = true;
    }

    if (userPressedAt && e.which === 32) {
        highlight();
    }
}

$('.typeable').on('keyup', highlighter);

Again, here's the fiddle: http://jsfiddle.net/wB6k5/

It's not nearly complete (typing another @username won't work, for instance - looks like we need to clear the range) but hopefully it helps you achieve your goal.

score 0 · Answer 2 · answered Jun 24 '14 at 02:21

Try

$(document).on("keydown keyup", ".typeable", function (event) {
    // 50: `@`, 32: `spacebar`
    // if (event.which === 50 || event.which === 32) {
    $(this).html(function (i, o) {
        var _o = $(this).text();
        var bold = _o.replace(/@[a-zA-Z0-9]+/g, function (b) {
            return "<b>" + b + "</b>";
        });
        return bold
    })
    .on("focus", function (e) {
        if (typeof window.getSelection != "undefined" 
           && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(e.target);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(e.target);
            textRange.collapse(false);
            textRange.select();
        };
    }).focus();
    // end `if`
    // };
});

jsfiddle http://jsfiddle.net/guest271314/wLqTA/

See http://stackoverflow.com/questions/13107150/jquery-javascript-syntax-highlighting-as-user-types-in-contenteditable-region , http://stackoverflow.com/questions/1181700/set-cursor-position-on-contenteditable-div — guest271314, Jun 24 '14 at 02:23

Change colour of text on keydown up to space

2 Answers2