jquery逗号css更改答案

【问题标题】：jquery comma css changejquery逗号css更改
【发布时间】：2011-07-29 17:57:17
【问题描述】：

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

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

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

我将如何使用 jquery 来做到这一点？

【问题讨论】：

一定要用jQuery吗？

标签： jquery css tags

【解决方案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/

【讨论】：

在哪里可以找到（无名称）188->comma,13->enter,...的列表？
搜索“JavaScript 键码”。这是我使用的页面：cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/…
太棒了！我也只是在摆弄这个，但只是布局，没有解决 JS - jsfiddle.net/kRXVV/1 我将标签跨度推入 <input ..> 并调整其左边距以强制光标过去现有标签。这些偏移量都必须计算出来。

【解决方案2】：

您需要为此使用contentEditable div。您不能在常规 input 中设置文本块的样式。您将要创建一个contentEditablediv，然后在按键（或按键）上运行代码，这会将文本包装在一个跨度中，然后设置样式。

【讨论】：

我如何在按键的逗号前面将文本换行？
@zzzzBov 怎么样？我不认为你可以在 textarea 中设置文本样式。
@kingjiv，我收回了。我一定是记错了我对自定义文本区域的实验。我可能已经用div[contenteditable] 替换了textarea。很抱歉造成混乱。

【解决方案3】：

仅使用输入文本框是不可能的。您将不得不使用 div/span 和输入文本框的组合。在按键事件中，您必须动态创建所需的标签并附加到 div 中。

【讨论】：

【解决方案4】：

文本框无法做到这一点。您可以采取以下几种方法：

1) 将焦点设置到隐藏的输入框并监听按键事件。然后使用 DIV、SPAN 和 CSS 模拟文本框和您描述的行为。

2) 在文本框下方显示突出显示的术语（或标签）（更简单）

3) 使用 kingjiv 建议的技术

无论哪种情况，这都不是一项简单的任务。

【讨论】：