at.js

/*http://stackoverflow.com/questions/24376296/change-colour-of-text-on-keydown-up-to-space*/

by guest271314

HTML

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

CSS

.typeable {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 2px;
    width: 500px;
    min-height: 75px;
}

JavaScript

$(document).on("keydown keyup", ".typeable", function (event) {
    // `@`, `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();
    // };
});