Question

我想要做的基本上就是每当我写任何以＃开头的东西时，标记字符串的颜色应该立即改为其他颜色，比如蓝色。当我按空格键结束字符串时，颜色应该变回黑色。我在一个令人满意的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的原因是在将实际输入添加到文本字段之前添加标记。我使用文本字段作为输入，但可以根据需要进行修改。

Answer 2

这是一个工作实例，通过将Sondre给出的解决方案与Mr_Green（Set the caret position always to end in contenteditable div）的解决方案结合起来，将插入符号放在最后。

http://jsfiddle.net/344m4/1/

var hashTagList = [];

function logHashList(){
    hashTagList = [];
    $('.highlight').each(function(){
        hashTagList.push(this.innerHTML);
    });
    for(var i=0;i&lt;hashTagList.length;i++){
        alert(hashTagList[i]);
    }
    if(hashTagList.length==0){
        alert('You have not typed any hashtags');
    }
}
$(function() {

    var hashtags = false;

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

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

    });

});


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        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(el);
        textRange.collapse(false);
        textRange.select();
    }
}

使用Jquery实现Hashtags

2 个答案: