jquery 逗号 css 更改

Question

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

我有一个文本输入，用户可以在标签中输入。

用户在输入中键入标签(例如“starcraft”)并按下逗号键后，我希望逗号之前的所有字符(即单词“starcraft”)更改颜色和背景颜色。因此，用户输入标签并按逗号后，他可以看到标签形式的单词。

我如何使用 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/