我用jquery在可编辑的div里面写的实时样式

Question

我 this fiddle 显示我想要做的事情。 基本上，我想在键入某些单词时设置我的文本样式。此样式将告知用户他们用于构建查询的语法是正确的。

$(function () {
$('.textarea').focus();
$('.textarea').keyup(function () {
    var a = $(this).text().split(" ").join("</span> <span>");
    a = "<span>" + a + "</span>";
    $('.result').html(a);

    $('.result').find(":contains('where')").addClass('where marker').next().addClass('where value');
    $('.result').find(":contains('since')").addClass('since marker').next().addClass('since value');
});
});


// try writing 'hero where London since 2008' in textarea

它正在另一个div（结果）中工作，但我真正想要的是样式输出与我写的相同div（textarea），

任何人都可以看看它并提供帮助吗？ 感谢

Answer 1

看着你的小提琴，我把它设置为使用jQuery 1.9并输入你的代码和一些HTML / CSS，它似乎正在做你想要的。

HTML：

<div class="textarea" contenteditable></div>
<div class="result"></div>

CSS：

.textarea {
    min-height: 20px;
    background-color: black;
    color: white;
}
.marker {
    color: red;
}

.value {
    color: blue;
}

JS：

$('.textarea').keyup(function () {
    var a = $(this).text().split(" ").join("</span> <span>");
    a = "<span>" + a + "</span>";
    $('.result').html(a);

    $('.result').find(":contains('where')").addClass('where marker').next().addClass('where value');
    $('.result').find(":contains('since')").addClass('since marker').next().addClass('since value');
});

结果：

这是你想要发生的事情，还是应该有所不同？