2

マウスのクリックでテキストを分割または結合したいと考えています。私がやっているプロジェクトの一環として。

ユーザーが文字をクリックすると、現在の状態に応じて、現在の文字の後に単語境界がマークまたはマーク解除されます。

現在、私のテキストの各単語はスパンに含まれています：

<span class="word">te</span> <span class="word">xt</span>

をクリックすると、次のようになりますe。

<span class="word">text</span>

t元のテキストの をクリックすると、次のようになります。

<span class="word">t</span> <span class="word">e</span> <span class="word">xt</span>

これは jQuery 関数で実行できると思いますがreplaceWith()、個々の文字を検出する方法がよくわかりません (理想的には、テキストが比較的長い可能性があるため、各文字の余分なスパンを避けたいと思います)。これを行う方法に関する実装のニーズや提案について、何か助けていただければ幸いです。

4

2 に答える 2

2

それがまさにあなたが望むものかどうかはわかりませんが、おそらく役立つでしょう：

テキストエリアとjCaretプラグインを使用してカーソル位置を検出し、クリック時にスペースを挿入または削除します。

JS:

$('textarea').bind('click', function() {
    var v = $(this).val();
    if (v) {
        var p = $(this).caret().start;
        var ls = $(this).val().split('');
        if (ls[p] == ' ') {
            ls.splice(p, 1);
        } else {
            ls.splice(p, 0, ' ');
        }
        $(this).val(ls.join(''));
    }
});​

デモ：

http://jsfiddle.net/JrHQB/

テキストボックスなし:

JS:

$('#t').html('<span>' + $('#t').text().split('').join('</span><span>') + '</span>').find('span').click(function() {
    if ($(this).next().text() == ' ') {
        $(this).next().remove();
    } else {
        $(this).after('<span> </span>');
    }
});​

デモ：

http://jsfiddle.net/v4dxf/

于 2012-06-02T09:19:35.767 に答える
1

個々のキャラクターのクリックを検出して処理するには、そのキャラクターに独自のDOM要素[1]がない限り、追加のスパンが必要になります。唯一の例外は、TextFieldまたはTextArea内で、クリックするとカーソルが移動してからOnClickハンドラーがトリガーされます。そこで、現在のカーソル位置に必要な情報が含まれ、OnClickハンドラーで使用できます。

[1]これは完全に真実ではありませんが、代替案がリモートで受け入れられるかどうかを気にするのは難しすぎます。

于 2012-06-02T09:12:18.637 に答える