使用x和y位置設置textarea的插入位置

我想要實現內聯版本，所以如果用戶點擊某個文本的div，textarea將出現在與點擊的div位置相同的位置，並會從div中獲取文本。這對我來說很好，但接下來我要做的是根據div點擊事件的x和y位置設置textarea的插入位置。有任何想法嗎？使用x和y位置設置textarea的插入位置

HTML：

<div id="content" style="display: block; z-index: 10">Some text</div> 

<textarea id="editor" style="position: absolute; display: none; z-index: 11"></textarea>

JS：

$('#content').click(function(e) { 
    var content = $(this); 
    var editor = $('#editor'); 

    var position = content.offset(); 

    editor.css('left', position.left); 
    editor.css('top', position.top); 
    editor.val(content.text()); 
    editor.show(); 

    var mousePosition = { x: e.offsetX, y: e.offsetY }; 

    // here I want to set the #editor caret position at the same place, 
    // where user clicks the #content (mousePosition variable) 
});

來源

2013-07-31 cryss

插入符號始終位於一個文本節點，則無法將其定位到一個空的區域。 – Teemu

該區域不會爲空 - 它將具有與div相同的內容。 – cryss

https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable –

看起來像你可以做這樣的事情：

createTextArea = function (e) { 
    var range = window.getSelection().getRangeAt(0), 
     start = range.startOffset, 
     target = e.target, 
     setPoint; 
    while (target.tagName.toLowerCase() !== 'div') { 
     target = target.parentElement; 
     if (!target) return; 
    } 
    range.setStart(target, 0); 
    setPoint = range.toString().length; 
    // place and show #editor 
    editor.focus(); 
    editor.setSelectionRange(setPoint, setPoint); 
    return; 
};

An example at jsFiddle。請注意，這隻適用於現代瀏覽器。較老的IE沒有輸入API，選擇/範圍模型完全不同。

來源

2013-07-31 09:45:54 Teemu

是的，謝謝。我在同一時間找到了解決方案:) – cryss

感謝您的解決方案。爲我節省了很多時間。我還創建了一個稍微更改的示例，允許在同一元素中標記一系列文本。見http://jsfiddle.net/BY5NL/3/ –

我已經找到了解決辦法：

JS：

function getCaretPosition(editableDiv) { 
    var caretPos = 0, containerEl = null, sel, range; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      if (range.commonAncestorContainer.parentNode == editableDiv) { 
       caretPos = range.endOffset; 
      } 
     } 
    } else if (document.selection && document.selection.createRange) { 
     range = document.selection.createRange(); 
     if (range.parentElement() == editableDiv) { 
      var tempEl = document.createElement("span"); 
      editableDiv.insertBefore(tempEl, editableDiv.firstChild); 
      var tempRange = range.duplicate(); 
      tempRange.moveToElementText(tempEl); 
      tempRange.setEndPoint("EndToEnd", range); 
      caretPos = tempRange.text.length; 
     } 
    } 
    return caretPos; 
} 

$.fn.selectRange = function (start, end) { 
    if (!end) end = start; 
    return this.each(function() { 
     if (this.setSelectionRange) { 
      this.focus(); 
      this.setSelectionRange(start, end); 
     } else if (this.createTextRange) { 
      var range = this.createTextRange(); 
      range.collapse(true); 
      range.moveEnd('character', end); 
      range.moveStart('character', start); 
      range.select(); 
     } 
    }); 
};

用法：

$('#content').click(function (e) { 
    var content = $(this); 
    var editor = $('#editor'); 

    var caret = getCaretPosition(this); 

    var position = content.offset(); 

    editor.css('left', position.left); 
    editor.css('top', position.top); 
    editor.val(content.text()); 
    editor.show(); 

    var mousePosition = { x: e.offsetX, y: e.offsetY }; 

    // here I want to set the #editor caret position at the same place, 
    // where user clicks the #content (mousePosition variable) 

    editor.selectRange(caret, caret); 
});

來源

2013-07-31 09:48:43 cryss

使用x和y位置設置textarea的插入位置

回答

相關問題