Question

我将<ul><li></li><ul>插入内容可编辑div，并希望将插入符号移至li。

我尝试将jQuery重点放在li上，但重点不在li上。然后我尝试将tabindex属性添加到li，但焦点突出显示该区域而没有实际将插入符号移动到li中。

任何帮助将不胜感激，谢谢！

Answer 1

如果元素可以包含插入符号，则可以使用以下命令将插入符号移动到该元素：

$([selector]).focus();
$([selector]).select(); //include this line if '.focus()' alone isn't working

虽然我不认为li元素可以包含插入符号，但它正如您所说的那样位于可编辑的div内，所以也许它可以。在不知道你的具体情况的情况下无法确定。

...经过fiddle from the first comment很长一段时间的努力，我真的开始相信这是不可能的。我最终got to this，但还没有进一步（Original caret positioning code by Tim Down。）

更新

经过更长时间和更艰苦的尝试（通过OP，我放弃了），最终找到了一个解决方案是的，它非常hacky，而不是IE9兼容，但它可以完成这项工作：

＆＃13;

$(window).on('load',function(){
  $('#addListBtn').click(function(){
    $('div.input').append('<ul><li><div id="insertedList">&nbsp;</div></li></ul>');
    if (setCaret('insertedList')) {$('#insertedList').remove();} //don't remove until setCaret() has fully executed
  });

  function setCaret(id) {
    var range = document.createRange();
    range.setStart(document.getElementById(id).childNodes[0],0);
    range.collapse(true);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
    return true;
  }
});

＆＃13;

.input {border: 1px solid #ccc;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="addListBtn">Insert List</button><br /><br /> <!--FOR TESTING ONLY!-->

<div class="input" contenteditable="true">
  Some text that's already in the div.
</div>

＆＃13;

＆＃13; （小提琴：http://jsfiddle.net/nsf0rt51/10/ ）

此代码首先附加列表：<ul><li><div id="insertedList"></div></li></ul>。请注意div内的虚拟li （这样做了，因为为了设置插入符号，元素必须有一个ID并且必须有一些内容。通过使用虚拟div，我们可以在插入符号后删除该div剩下的就是干净的清单。）
接下来，将插入符号设置为虚拟div的开头。我把这个代码放在一个从click-handler内部调用的标准函数中。我是这样做的，所以可以从多个地方调用该函数（也许你想在插入时插入其他需要关注的东西）。
最后，虚拟div从DOM中移除，留下干净的<ul><li></li></ul>，其中的插入符号闪烁。

请注意$([selector]).focus();不再需要，因为在设置插入符号时会自动进行对焦。
如果您发现代码无法正常工作，请尝试将$('div.input').focus();放在追加行之后，也许会有所帮助。

如何在内容可编辑的div中将插入符移动到子li？

1 个答案:

更新