问题描述
当一个contentEditable ='on'< div>重新获得焦点时,我在一个确定的,跨浏览器的解决方案中将光标/插入符号的位置设置到最后一个已知的位置。看来内容可编辑div的默认功能是在每次点击它时将光标/光标移动到div中文本的开头,这是不可取的。
我相信当他们离开div的焦点时,我将不得不在当前光标位置存储一个变量,然后在他们再次聚焦时再重新设置它,但是我无法将它们放在一起,或者找不到如果任何人有任何想法,工作代码片段或样本,我会很高兴看到他们。
$ b工作代码示例尚未。
$ b
我还没有任何代码,但这里是我所拥有的:
<脚本类型= 文本/ JavaScript的 >
// jQuery
$(document).ready(function(){
$('#area')。focus(function(){..} // focus我想象我需要
< / script>
< div id =areacontentEditable =true>< / div>
PS。我试过这个资源,但它似乎不适用于< div>。也许只适用于textarea() em>
这与基于标准的浏览器兼容,但可能会在IE中失败。一个起点IE不支持DOM范围。
var editable = document.getElementById('editable'),
选择,范围;
//填充选择和范围变量
var captureSelection =函数(e){
//不要捕获edita之外的选择ble区域
var isOrContainsAnchor = false,
isOrContainsFocus = false,
sel = window.getSelection(),
parentAnchor = sel.anchorNode,
parentFocus = sel.focusNode ; (parentAnchor&& parentAnchor!= document.documentElement){
if(parentAnchor == editable){
isOrContainsAnchor = true;
}
parentAnchor = parentAnchor.parentNode; (parentFocus&& parentFocus!= document.documentElement){
}
if(parentFocus == editable){
isOrContainsFocus = true;
}
parentFocus = parentFocus.parentNode;
}
if(!isOrContainsAnchor ||!isOrContainsFocus){
return;
}
selection = window.getSelection();
//获取范围(标准)
if(selection.getRangeAt!== undefined){
range = selection.getRangeAt(0);
//获取范围(Safari 2)
} else if(
document.createRange&&
selection.anchorNode&&
selection.anchorOffset&&
selection.focusNode&&
selection.focusOffset
){
range = document.createRange();
range.setStart(selection.anchorNode,selection.anchorOffset);
range.setEnd(selection.focusNode,selection.focusOffset);
} else {
//此处失败,不由脚本的其余部分处理。
//可能是IE或者一些旧版浏览器
}
};
//输入
时重新计算选择editable.onkeyup = captureSelection;
//单击/拖拽选择后重新计算选择
editable.onmousedown = function(e){
editable.className = editable.className +'选择';
};
document.onmouseup = function(e){
if(editable.className.match(/ \sselecting(\s | $)/)){
editable.className = editable。 className.replace(/选择(\s | $)/,'');
captureSelection();
}
};
editable.onblur = function(e){
var cursorStart = document.createElement('span'),
collapsed = !! range.collapsed;
cursorStart.id ='cursorStart';
cursorStart.appendChild(document.createTextNode(' - '));
//插入开始游标标记
range.insertNode(cursorStart);
//如果选择了任何文本,插入结束游标标记
if(!collapsed){
var cursorEnd = document.createElement('span');
cursorEnd.id ='cursorEnd';
range.collapse();
range.insertNode(cursorEnd);
}
};
//将回调函数添加到afterFocus以在光标被替换后被调用
//如果您喜欢,这对于样式化按钮等将非常有用
var afterFocus = [] ;
editable.onfocus = function(e){
//稍微的延迟将避免初始选择
//(在开始或内容取决于浏览器)被误认为
setTimeout function(){
var cursorStart = document.getElementById('cursorStart'),
cursorEnd = document.getElementById('cursorEnd');
//不要做任何事(如果(cursorStart){
cursorStart.parentNode()){
.removeChild(cursorStart);
}
if(cursorEnd){
cursorEnd.parentNode.removeChild(cursorEnd);
}
} else if(cursorStart){
captureSelection();
var range = document.createRange();
if(cursorEnd){
range.setStartAfter(cursorStart);
range。 setEndB efore(cursorEnd);
//删除游标标记
cursorStart.parentNode.removeChild(cursorStart);
cursorEnd.parentNode.removeChild(cursorEnd);
//选择范围
selection.removeAllRanges();
selection.addRange(range);
} else {
range.selectNode(cursorStart);
//选择范围
selection.removeAllRanges();
selection.addRange(range);
//删除游标标记
document.execCommand('delete',false,null);
//在这里调用回调函数
for(var i = 0; i< afterFocus.length; i ++){
afterFocus [一世]();
}
afterFocus = [];
//再次注册选择
captureSelection();
},10);
};
I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable='on' <div> regains focus. It appears default functionality of a content editable div is to move the caret/cursor to the beginning of the text in the div each time you click on it, which is undesirable.
I believe I would have to store in a variable the current cursor position when they are leaving focus of the div, and then re-set this when they have focus inside again, but I have not been able to put together, or find a working code sample yet.
If anybody has any thoughts, working code snippets or samples I'd be happy to see them.
I don't really have any code yet but here is what I do have:
<script type="text/javascript">
// jQuery
$(document).ready(function() {
$('#area').focus(function() { .. } // focus I would imagine I need.
}
</script>
<div id="area" contentEditable="true"></div>
PS. I have tried this resource but it appears it does not work for a <div>. Perhaps only for textarea (How to move cursor to end of contenteditable entity)
This is compatible with the standards-based browsers, but will probably fail in IE. I'm providing it as a starting point. IE doesn't support DOM Range.
var editable = document.getElementById('editable'),
selection, range;
// Populates selection and range variables
var captureSelection = function(e) {
// Don't capture selection outside editable region
var isOrContainsAnchor = false,
isOrContainsFocus = false,
sel = window.getSelection(),
parentAnchor = sel.anchorNode,
parentFocus = sel.focusNode;
while(parentAnchor && parentAnchor != document.documentElement) {
if(parentAnchor == editable) {
isOrContainsAnchor = true;
}
parentAnchor = parentAnchor.parentNode;
}
while(parentFocus && parentFocus != document.documentElement) {
if(parentFocus == editable) {
isOrContainsFocus = true;
}
parentFocus = parentFocus.parentNode;
}
if(!isOrContainsAnchor || !isOrContainsFocus) {
return;
}
selection = window.getSelection();
// Get range (standards)
if(selection.getRangeAt !== undefined) {
range = selection.getRangeAt(0);
// Get range (Safari 2)
} else if(
document.createRange &&
selection.anchorNode &&
selection.anchorOffset &&
selection.focusNode &&
selection.focusOffset
) {
range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
} else {
// Failure here, not handled by the rest of the script.
// Probably IE or some older browser
}
};
// Recalculate selection while typing
editable.onkeyup = captureSelection;
// Recalculate selection after clicking/drag-selecting
editable.onmousedown = function(e) {
editable.className = editable.className + ' selecting';
};
document.onmouseup = function(e) {
if(editable.className.match(/\sselecting(\s|$)/)) {
editable.className = editable.className.replace(/ selecting(\s|$)/, '');
captureSelection();
}
};
editable.onblur = function(e) {
var cursorStart = document.createElement('span'),
collapsed = !!range.collapsed;
cursorStart.id = 'cursorStart';
cursorStart.appendChild(document.createTextNode('—'));
// Insert beginning cursor marker
range.insertNode(cursorStart);
// Insert end cursor marker if any text is selected
if(!collapsed) {
var cursorEnd = document.createElement('span');
cursorEnd.id = 'cursorEnd';
range.collapse();
range.insertNode(cursorEnd);
}
};
// Add callbacks to afterFocus to be called after cursor is replaced
// if you like, this would be useful for styling buttons and so on
var afterFocus = [];
editable.onfocus = function(e) {
// Slight delay will avoid the initial selection
// (at start or of contents depending on browser) being mistaken
setTimeout(function() {
var cursorStart = document.getElementById('cursorStart'),
cursorEnd = document.getElementById('cursorEnd');
// Don't do anything if user is creating a new selection
if(editable.className.match(/\sselecting(\s|$)/)) {
if(cursorStart) {
cursorStart.parentNode.removeChild(cursorStart);
}
if(cursorEnd) {
cursorEnd.parentNode.removeChild(cursorEnd);
}
} else if(cursorStart) {
captureSelection();
var range = document.createRange();
if(cursorEnd) {
range.setStartAfter(cursorStart);
range.setEndBefore(cursorEnd);
// Delete cursor markers
cursorStart.parentNode.removeChild(cursorStart);
cursorEnd.parentNode.removeChild(cursorEnd);
// Select range
selection.removeAllRanges();
selection.addRange(range);
} else {
range.selectNode(cursorStart);
// Select range
selection.removeAllRanges();
selection.addRange(range);
// Delete cursor marker
document.execCommand('delete', false, null);
}
}
// Call callbacks here
for(var i = 0; i < afterFocus.length; i++) {
afterFocus[i]();
}
afterFocus = [];
// Register selection again
captureSelection();
}, 10);
};
这篇关于在contentEditable< div>上设置光标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!