jquery逗号改变

Question

这是一个棘手的问题,我会尽力描述它.

我有一个文本输入,用户可以在其中输入标签.

用户在输入中键入标签(例如"星际争霸")并按下逗号键后,我希望逗号前面的所有字符(即星际文字)改变颜色和背景颜色.因此,在用户键入标签并按下逗号后,他可以在标签表单中看到该单词.

我怎么用jquery做这个？

Answer 1

据我所知,没有简单的方法来修改文本框中部分文本的样式.但是,你可以这样做:

HTML

<span id="tags"></span><input id="enterTag" type="text" />

的JavaScript/jQuery的

$('#enterTag').keydown(function(event) {
    var tag = $(this).val();
    // 188 is comma, 13 is enter
    if (event.which === 188 || event.which === 13) {
        if (tag) {
            $('#tags').append('<span>' + tag + '</span>');
            $(this).val('');
        }
        event.preventDefault();
    }
    // 8 is backspace
    else if (event.which == 8) {
        if (!tag) {
            $('#tags span:last').remove();
            event.preventDefault();
        }
    }
});

CSS

#tags span {
    display: inline-block;
    background: #6999c0;
    color: #FFFFFF;
    padding: 4px;
    border: solid 1px #477eab;
    margin-right: 4px;
}

工作示例:http://jsfiddle.net/FishBasketGordo/xckjk/