Javascript 方法:每次按空格键后,创建一个新的跨度元素并将插入符号放在那里?

Javascript 方法:每次按空格键后,创建一个新的跨度元素并将插入符号放在那里?,javascript,Javascript,如何将光标放在div上以及该div的某个位置 尝试使用setStar将其放置,但光标位于开头,我不希望 错误为:{“message”:“Uncaught IndexSizeError:未能对“Range”执行“setStart”:偏移量处没有子项} let write=''; document.getElementById('parent')。addEventListener('keypress',函数(e){ var palabra=书面形式; write+=String.fromCharC

如何将光标放在div上以及该div的某个位置

尝试使用setStar将其放置,但光标位于开头,我不希望

错误为:
{“message”:“Uncaught IndexSizeError:未能对“Range”执行“setStart”:偏移量处没有子项}

let write='';
document.getElementById('parent')。addEventListener('keypress',函数(e){
var palabra=书面形式;
write+=String.fromCharCode(e.which);
如果(e.which==32){
var元素=document.getElementById(“父项”);
var doc=element.ownerDocument | | element.document;
var win=doc.defaultView | | doc.parentWindow;
//行动方案
var sel=window.getSelection();
如果(选择范围计数>0){
var range=win.getSelection().getRangeAt(0);
常数索引=range.startOffset;
//range.setStart(document.getElementById(window.getSelection().anchorNode.parentNode.id),索引);
}
sel.focusNode.textContent=sel.focusNode.textContent.replace(palabra,“”);
}
})
#parent>div{
边框颜色:黄色;
浮动:左;
}
.根{
右侧填充:1px;
}

魁北克
单词
洛勒姆
乱数假文

这是一段时间研究和编码的结果,希望对您有所帮助:)

对于其他人:在与提问者确认是否可以后,我将
更改为

var newString=“”;
document.body.onkeyup=函数(e){
newString+=String.fromCharCode(例如keyCode);
如果(e.keyCode==32){
var parent=document.getElementById(“父项”);
var targetelement=parent.childNodes[parent.childNodes.length-1];
var div=document.createElement(“SPAN”);
div.className=“root”;
div.id=parseInt(document.getElementsByClassName(“root”)[document.getElementsByClassName(“root”).length-1].id)+1;
div.contenteditable=false;
div.innerHTML=“”;
var beforeelement=parent.childNodes[parent.childNodes.length-1];
beforelement.innerHTML=beforelement.innerHTML.substring(0,1)+beforelement.innerHTML.substring(1).replace(“”,);
文件.getElementById(“父”).appendChild(div);
console.log(“追加!”);
var selectionrange=document.createRange();
var selection=window.getSelection();
selectionrange.setStart(targetelement,1);
selectionrange.collapse(true);
selection.removeAllRanges();
selection.addRange(selectionrange);
}
}
#parent>div{
边框颜色:黄色;
浮动:左;
}
.根{
右侧填充:1px;
}

魁北克
单词
洛勒姆
乱数假文

好的,我假设您想要移动插入符号(插入符号是指示开始编辑文本的闪烁线),而不是鼠标指针(因为这是不可能的)

这会将插入符号位置更改为文本中所需的任何位置:

element.setSelectionRange(pos, pos);
这是一种基于从所需位置选择文本到基本上将插入符号移动到相同位置的方法

更新:

好的,稍后的一些研究表明,这只适用于
输入
类型的元素,而
内容可编辑
字段的工作方式不同。无论如何,这是我已经测试过的一些代码,将在您的情况下工作

var parent = document.getElementById("parent");
var range = document.createRange();
var selection = window.getSelection();
var element = parent.childNodes[parent.childNodes.length - 1];
range.setStart(element, offset);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);

@DineshGhule我做了一个拼写检查器来聊天你是说如何移动光标?@SheshankS。是的,准确地说,我想移动到一个确定的索引右键检查我的答案@x-RW你说的索引是什么意思?你是说位置吗?检查我的代码,你会看到你是否可以移动,但不是我想要的移动方式it@x-对不起,我不明白你在说什么……问题出在哪里你不能移动光标,你不能用js@x-rw如果这对您有帮助,请将其标记为正确答案。您不能使用鼠标的javascriptcursor?@SheshankS移动光标。将基本HTML更改为
输入
,而OP使用了
内容可编辑
,这完全是错误的。这一决定取决于O我甚至不会讨论你是如何复制粘贴我以前写的东西的。你可以用我的例子来测试please@x-rw老实说,我不确定你到底想把插入符号放在哪里。但是,这段代码似乎是在你的文本div列表中选择最后一个子项,然后将插入符号设置在偏移量处(为了测试,我硬编码为1)问题是sel.focusNode.textContent=sel.focusNode.textContent.replace(palabra,“”)行;然后我用这个内容创建了一个新的div。另一个问题是我使用的是div,而不是普通的divtext@x-rw您能解释一下您希望代码实现什么吗?…您编写的一些代码相当扭曲,例如
document.getElementById(window.getSelection()).anchorNode.parentNode.id
是多余的,因为它与
window.getSelection().anchorNode.parentNode
相同。此代码应该做什么?按空格键时,需要将插入符号设置到特定位置,然后做什么?