5

我正在尝试构建一个允许人们获取单词或短语（在选择时）的工具，选择部分已完成，但单词部分未完成。

当有人点击一个单词时，我需要能够获取当前单词，我找到了这个解决方案

在段落中点击单词

不幸的是，这段代码更改了所有单词并<span>为每个单词添加了一个，这导致了我这边的一个问题，因为我无法在文本中添加 html 标记（css 文件可以动态导入或添加）

如果可能的话，有没有更好的方法来实现这一点？

前任：

Lorem ipsum dolor sit amet, consectetur adipiscing elit。Donec 拍卖前坐在 amet nisl consequat volutpat。

如果我点击“坐”，我会提醒“坐”

4

2 回答 2

17

好吧，对于您的解决方案，您将需要使用selections和doubleclick事件作为一件棘手的事情，并通过双击事件在生成的范围内获取选定的单词。

如果您不想引入新标签，则没有其他方法。

尝试这个：

现场演示：http: //jsfiddle.net/oscarj24/5D4d3/

$(document).ready(function() {

    /* set hand cursor to let know the user that this area is clickable */
    var p = $('p');
    p.css({ cursor: 'pointer' });

    /* doubleclick event working with ranges */
    p.dblclick(function(e) {
        var selection = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(selection.toString());
        if(word != '') {
            alert(word);
        }
        /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */
        selection.collapse();
        e.stopPropagation();
    });

});​

希望这可以帮助 ：-）

于 2012-09-07T16:24:22.353 回答
2

Oscar Jara 的回答（上图）说，如果您不想引入新标签，则没有其他方法[返回点击的词] 。 这在 2012 年可能是真的，但目前我们有getSelection：

DocumentOrShadowRoot 接口的 getSelection() 属性返回一个 Selection 对象，表示用户选择的文本范围，或插入符号的当前位置。

我在 Windows Chrome 63.0.3239.84 和 Windows Firefox 56.0 下工作。要使用其他浏览器对其进行测试，请使用此jsfiddle 示例进行测试

    window.getSelection();

涉及 getSelection 的相关 SO 问题：

一键获取单词

检测文本中点击了哪个单词

返回出现点击单词的句子

于 2017-12-28T17:37:47.090 回答