javascript - 使用 Jquery 实现标签

Question

基本上我想做的是，每当我写任何以 # 开头的内容时，标记字符串的颜色应该立即更改为其他颜色，比如蓝色。当我按空格结束字符串时，颜色应该变回黑色。我在 contenteditable div 上尝试了这样的逻辑:

    if (# is pressed) 
    hashtagging = true
    append "<span>" to div

    if (space is pressed and hashtagging is true) 
    hashtagging = false
    append "</span>" to div

这没有按预期工作。

Answer 1

应该这样做:

$(function() {

    var hashtags = false;

    $(document).on('keydown', '#myInputField', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                input_field.val(input_field.val() + "<span class='highlight'>");
                hashtags = true;
                break;
            case arrow.space:
                if(hashtags) {
                    input_field.val(input_field.val() + "</span>");
                    hashtags = false;
                }
                break;
        }

    });

});

现在这段代码会检查 keydown 是否按下了主题标签或空格，并添加了一个带有样式类的跨度。检查 keydown 而不是 keyup 的原因是在将实际输入添加到文本字段之前添加标签。我使用文本字段作为输入，但可以根据需要对其进行修改。