我正在尝试构建一个工具,允许人们获取单词或短语(在选择上),选择部分已完成,但不是单词部分。
当有人点击一个单词时,我需要能够得到当前的单词,我找到了这个解决方案
不幸的是,这段代码改变了所有的单词并为每个单词添加了一个<span>
,这导致了我的问题,因为我无法在文本中添加html标签(css文件可以导入或动态添加)
如果可能的话,是否有更好的方法来实现这一目标?
EX:
Lorem存有悲坐阿梅德,consectetur adipiscing ELIT。直到笔者出版的摄影周末。
如果我点击“坐”,那么我会提醒'坐'
那么,对于你的解决方案,你需要使用selections
和doubleclick
事件作为一个棘手的事情,并通过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();
});
});
希望这可以帮助 :-)
Oscar Jara's answer(上图)说,如果你不想引入新的标签,没有别的办法[返回点击的单词]。这在2012年可能是真的,但目前我们有getSelection:
DocumentOrShadowRoot接口的getSelection()属性返回一个Selection对象,表示用户选择的文本范围或插入符的当前位置。
我在Windows Chrome 63.0.3239.84和Windows Firefox 56.0下工作。要与其他浏览器一起测试,请使用此jsfiddle example进行测试
window.getSelection();
涉及getSelection的相关SO问题: