How to select text area instead of text?

Question

I have to give position for the selected text in textarea. Here I have a sample for text(paragraphs).But I need for text area.I am facing some issues.(getting null for text node).

JavaScript:

    function findClickedWord(parentElt, x, y) {
    if (parentElt.nodeName !== '#text') {
        console.log('didn\'t click on text node');
        return null;
    }
    var range = document.createRange();
    var words = parentElt.textContent.split(' ');
    var start = 0;
    var end = 0;
    for (var i = 0; i < words.length; i++) {
        var word = words[i];
        end = start+word.length;
        range.setStart(parentElt, start);
        range.setEnd(parentElt, end);
        // not getBoundingClientRect as word could wrap
        var rects = range.getClientRects();
        var clickedRect = isClickInRects(rects);
        if (clickedRect) {
            return [word, start, clickedRect];
        }
        start = end + 1;
    }

    function isClickInRects(rects) {
        for (var i = 0; i < rects.length; ++i) {
            var r = rects[i]
            if (r.left<x && r.right>x && r.top<y && r.bottom>y) {            
                return r;
            }
        }
        return false;
    }
    return null;
}
function onClick(e) {
    var elt = document.getElementById('info');
    var clicked = findClickedWord(e.target.childNodes[0], e.clientX, e.clientY);
    elt.innerHTML = 'Nothing Clicked';
    if (clicked) {
        var word = clicked[0];
        var start = clicked[1];
        var r = clicked[2];
        elt.innerHTML = 'Clicked: ('+r.top+','+r.left+') word:'+word+' at offset '+start; 
    }
}

document.addEventListener('click', onClick);

Here is my plunker

Any help would be appreciated.

score 0 · Answer 1 · answered Jan 29 '18 at 12:58

0

function ShowSelectionInsideTextarea(e){
  var textComponent = document.getElementById('mytextarea');

  var selectedText;
  // IE version
  if (document.selection != undefined){
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
  }
  // Mozilla version
  else if (textComponent.selectionStart != undefined){
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
  }
    alert("You selected: " + selectedText+", "+e.clientX+", "+e.clientY);
}

Please check this - plunkr I have created.

answered Jan 29 '18 at 12:58

Ashwin

12,081
22
83
117

can i place a div below the selected text in text-area..is it possible. – pbsbr Jan 29 '18 at 14:09
You already have x, y position of text selection. So instead of alerting put that msg inside a div and absolute position that div with that x, y position. – Ashwin Jan 30 '18 at 16:18

KL_ · Answer 2 · 2018-01-29T14:12:35.967

If you need a big area to edit text, edit <div> to <div contenteditable="true">

Or

function findClickedWord(parentElt, target) {
    if (parentElt.nodeName !== target.nodeName) {
        console.log('didn\'t click on text node');
        return null;
    }
    
    var startPos = parentElt.selectionStart,
        endPos = parentElt.selectionEnd,
        isSelected = startPos != endPos ? true : false,
        startStr = parentElt.value.substring(0, startPos),
        endStr = parentElt.value.substring(endPos),
        startWrdIndex = startStr.lastIndexOf(' ') + 1,
        endWrdIndex = endStr.indexOf(' ') + startStr.length + (endPos - startPos),
        selectedText = parentElt.value.substring(startWrdIndex, endWrdIndex);
        
        return {
          text : selectedText,
          start : startWrdIndex,
          end : endWrdIndex,
          selected : isSelected,
        };
}
function onClick(e) {
    var elt = document.getElementById('info');
    var textarea = document.getElementById('txt');
    var action = findClickedWord(e.target, textarea);
    elt.innerHTML = 'Nothing Clicked.';
    if (action) {
        elt.innerHTML = (action ? 'Selected' : 'Clicked') + '(' + action.start + ',' + action.end + ') words:"' + action.text + '"'; 
    }
}

document.addEventListener('click', onClick);

<div class="parent">
    <textarea id="txt" class="child">Bacon ipsum dolor amet meatball bresaola t-bone tri-tip brisket. Jowl pig picanha cupim landjaeger, frankfurter spare ribs chicken. Porchetta jowl pancetta drumstick shankle cow spare ribs jerky tail kevin biltong capicola brisket venison bresaola. Flank sirloin jowl andouille meatball venison salami ground round rump boudin turkey capicola t-bone. Sirloin filet mignon tenderloin beef, biltong doner bresaola brisket shoulder pork loin shankle turducken shank cow. Bacon ball tip sirloin ham.
    </textarea>
    <div id="info">Click somewhere in the paragraph above</div>
</div>

You can find it [here](https://stackoverflow.com/questions/48496292/how-to-show-a-div-below-selected-text-in-textarea#). :) — KL_, Jan 29 '18 at 15:36

How to select text area instead of text?

2 Answers2