Question

我有一个满足的div。我正在尝试做的是，如果用户键入@符号，它（在按键上）会更改文本的颜色（包括@符号）直到下一个空格。

例如，假设粗体文本是彩色文本：

“这是一些 @sample 文字。”

这是我开始的JSFiddle，但我不知道如何从中继续：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 @
});

请帮忙！

Answer 1

这是一个非常简单的例子，可以帮助您入门：http://jsfiddle.net/wB6k5/

它使用selection和range来选择字词，然后在选择上运行execCommand。

MDN Selection
MDN execCommand

密钥启动事件上有一个事件监听器，用于检查是否需要运行突出显示功能。

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);

同样，这里是小提琴：http://jsfiddle.net/wB6k5/

它几乎不完整（例如，输入另一个@username将无效 - 看起来我们需要清除范围）但希望它可以帮助您实现目标。

Answer 2

尝试

$(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/

将keydown上的文本颜色更改为空格

2 个答案: