Question

单击时是否可以选择整个单词？例如，我有一条文字：

I live in central Ave.

当我单击单词“ central”中的字符“ t”时，需要选择整个单词“ central”。可能吗？谢谢。

Answer 1

希望jsfiddle提供帮助。

http://jsfiddle.net/MattCMC/Vap7C/1875/

您可以将其定义为类单击功能：

  $(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;
  while (range.toString().indexOf(' ') != 0) {
    range.setStart(node, (range.startOffset - 1));
  }
  range.setStart(node, range.startOffset + 1);
  do {
    range.setEnd(node, range.endOffset + 1);

  }
  while (range.toString().indexOf(' ') == -1 && range.toString().trim() != '');
  var str = range.toString().trim();
  //alert(str);
});

Answer 2

可能。

您可以使用JS将每个单词嵌套在span标记中，然后将click事件绑定到包含的元素。使用冒泡/捕获来找出被点击的内容，并添加一个“突出显示”的类，您可以使用不同的样式来使其突出显示。

Answer 3

看看下面的方法。虽然确实需要一个插件，但这是必需的，因为选择事件是由浏览器而不是浏览器内部代码运行的。

https://codereview.stackexchange.com/questions/38089/select-text-with-just-one-click

Answer 4

我建议的是一种解决方法。您可能必须维护其他状态才能取消选择。让我知道这是否适合您。

HTML

<span class="text"> text is all I got </span>

JS

// find elements
$(function () {
    $('.text').each(function (index, ele) {
        $(ele).html($(ele).text().split(' ').map(function (word) {
            return ['<span class=\'clickable\'>', word, '</span>'].join('')
        }).join(' '))

    })
    $('.clickable').click(function (e) {
        $(this).css('background-color', 'blue').css('color', '#fff')
    })
})

提琴：http://jsfiddle.net/xpvt214o/715208/

单击时如何选择整个单词

4 个答案: