如何选择文本区域而不是文本？

Question

我必须在 textarea 中为所选文本指定位置。 这里我有一个文本示例（段落）。但我需要文本区域。我面临一些问题。（文本节点为空）。

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);

这是我的plunker

任何帮助将不胜感激。

Answer 1

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

请检查这个 - plunkr 我已经创建了。

Answer 2

如果您需要大面积编辑文本，请将<div> 编辑为<div contenteditable="true">

或者

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>