【问题标题】:How to select entire word when single click单击时如何选择整个单词
【发布时间】:2018-09-01 01:04:47
【问题描述】:

单击时是否可以选择整个单词?比如我有一段文字:

I live in central Ave.

当我单击单词'central'中的字符't'时,需要选择整个单词'central'。可能吗?谢谢。

【问题讨论】:

  • “选择”是什么意思?
  • 您必须更具体地说明您正在努力实现的目标。大多数(可能是所有浏览器?)的默认机制是双击任何单词都会选择它。你为什么要覆盖它?以及在什么工作框架内。从技术上讲,可以添加一个单击事件侦听器来执行操作,但它需要预先构建文档的特定结构。

标签: javascript


【解决方案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);
});

【讨论】:

【解决方案2】:

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

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

【讨论】:

    【解决方案3】:

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

    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】:

      有可能。

      您可以使用 JS 将每个单词嵌套在 span 标签中,然后将 click 事件绑定到包含元素。使用冒泡/捕获来确定哪个被点击并附加一个“突出显示”类,您可以设置不同的样式以突出显示。

      【讨论】:

      • 这对于已经通过 dbl-click 原生的功能来说太不优雅了。
      • @CodeAt30 您的问题是原始发帖人提出的问题,而不是完全符合要求的解决方案。
      • 是的,这是正确的,但我仍然认为在他采用这个解决方案之前应该提到它。有时,一个问题的正确答案实际上是在解释为什么导致该问题的方法是有问题的。但是是的,尽管缺少代码示例,但您的答案是合法的。
      • 同意,我认为这是原始问题下的 cmets 更相关的地方。然而,我们也必须承认,我们没有足够的上下文来判断用例是什么,您已经假设 select 意味着使部分副本可粘贴,而它可以在电子书阅读器应用程序中用于提供上方的浮动提示突出显示的单词。
      • 另外我没有提供任何代码,因为没有尝试解决方案来解决,我不太热衷于为人们编写应用程序而不是回答问题。 :)
      猜你喜欢
      • 2017-06-25
      • 1970-01-01
      • 2020-05-18
      • 1970-01-01
      • 1970-01-01
      • 2014-01-20
      • 1970-01-01
      • 2012-08-09
      • 2012-02-13
      相关资源
      最近更新 更多