Javascript 设置文本区域';使用x和y位置的s插入符号位置
我想实现内联编辑,所以如果用户单击带有文本的div,textarea将显示在与单击的div位置相同的位置,并将从div获取文本。这对我来说很好,但我接下来要做的是根据div click事件的x和y位置设置textarea的插入符号位置。有什么想法吗 HTML:Javascript 设置文本区域';使用x和y位置的s插入符号位置,javascript,html,textarea,Javascript,Html,Textarea,我想实现内联编辑,所以如果用户单击带有文本的div,textarea将显示在与单击的div位置相同的位置,并将从div获取文本。这对我来说很好,但我接下来要做的是根据div click事件的x和y位置设置textarea的插入符号位置。有什么想法吗 HTML: 看起来你可以这样做: createTextArea = function (e) { var range = window.getSelection().getRangeAt(0), start = range.s
看起来你可以这样做:
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;
};
。请注意,这只适用于现代浏览器。较旧的IE没有输入API,选择/范围模型完全不同。我找到了一个解决方案:
JS:
用法:
$('#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);
});
插入符号总是定位在文本节点上,您不能将其定位到空区域。该区域不会为空-它将具有与div相同的内容。我认为contenteditable feture在使用一些绑定工具(如Knockout或angular)时会导致问题。如果你看看一些流行的任务管理工具,比如wunderlist.com或asana.com,它们不使用contenteditable。为什么会有这些缺点?这个问题有问题吗?是的,谢谢。我同时找到了一个解决方案:)谢谢你的解决方案。节省了我很多时间。我还为您的示例创建了一个稍加修改的版本,允许标记一系列文本,以防它们位于同一元素中。看见
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;
};
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);
});