1

私がやりたいことを示すこのフィドルがあります。基本的に、特定の単語が入力されたときにテキストのスタイルを設定したいと考えています。このスタイルは、クエリの作成に使用している構文が正しいことをユーザーに知らせます。

$(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 (テキストエリア) にあることです。

誰でもそれを見て助けてもらえますか？ありがとう

4

1 に答える 1

0

あなたのフィドルを見て、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');
});

結果： フィドルの結果

これはあなたが望んでいることですか、それとも何か違うべきですか？

于 2013-01-30T16:52:49.813 に答える