Is it possible to select the entire word when single click? For example, I have a text:

I live in central Ave.

When I single click the character 't' in word 'central', the whole word 'central' needs to be selected. Is it possible? Thanks.

Is it possible to select the entire word when single click? For example, I have a text:

I live in central Ave.

When I single click the character 't' in word 'central', the whole word 'central' needs to be selected. Is it possible? Thanks.

• javascript

• 1 What do you mean by "select" ? – Alexandre Annic Commented Aug 31, 2018 at 13:54
• 1 You have to be more specific about that it is you are trying to achieve exactly. The default mechanism in most (maybe all browsers?) is that a double click on a any word will select it. Why would you want to override that? And in exactly what frame of work. Technically it is possible to add a click event listener that takes action but it would require a certain structuring of the way the document is built in advance. – CodeAt30 Commented Aug 31, 2018 at 13:55

4 Answers 4

Hope provided jsfiddle helps.

http://jsfiddle/MattCMC/Vap7C/1875/

You can define this as a class click function:

  $(".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);
});

Take a look at the following method. It does require a plugin though, but that would be needed because the selection event is run by the browser and not in-browser code.

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

What I am proposing is a workaround. You might have to maintain additional states to deselect. Let me know if that works for you.

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')
    })
})

Fiddle: http://jsfiddle/xpvt214o/715208/

It is possible.

You could use JS to nest each word in a span tag, then bind a click event to the containing element. Use bubbling/capturing to work out which got clicked and append a "highlighted" class which you can style differently to appear highlighted.