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>

我认为这可能与 jQueryreplaceWith()函数有关，但不太确定如何检测单个字符（理想情况下，我想避免每个字符有额​​外的跨度，因为我的文本可能相对较长）？对于我的实施需求和/或有关如何执行此操作的建议，将不胜感激。

4

2 回答 2

2

我不知道这是否正是您想要的，但也许会有所帮助：

我使用 textarea 和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 回答