CODEWITHSUNDEEP
javascript
typeof programmer
typeof programmer

Reputation: 1609

How to select entire word when single click

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.

Upvotes: 2

Views: 3827

Answers (4)

trk
trk

Reputation: 2228

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.net/xpvt214o/715208/

Upvotes: 0

Royal Wares
Royal Wares

Reputation: 1272

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.

Upvotes: -1

Matt
Matt

Reputation: 1264

Hope provided jsfiddle helps.

http://jsfiddle.net/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);
});

Upvotes: 10

user7779924
user7779924

Reputation:

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.com/questions/38089/select-text-with-just-one-click

Upvotes: 0

Related Questions