用 GPT 写了一个和编辑器搭边的小需求

2024-05-17 · 周五一般多云

工作任务发现有一个细节交互没做,需求是点击某个空白处自动定位到可编辑段落的最后一个字,参考此前写给小窝后台编辑器的经验无效(因为是基于 Textarea 做的),特此请教 GPT 写了一个,基本符合我的需求,只要把点击按钮的逻辑改成对应元素就可以了。

<div id="trigger">点击这里</div>

<p id="editable" contentEditable="true">这是一个可编辑的段落,点击上面的 div 将光标放在这里。</p>

<script>
  document.getElementById('trigger').addEventListener('click', function() {
    var editableElement = document.getElementById('editable');

    // 确保元素是可编辑的
    if (editableElement.isContentEditable) {
      // 将光标放置在最后一个字之后
      var range = document.createRange();
      var sel = window.getSelection();
      range.selectNodeContents(editableElement);
      range.collapse(false); // 将collapse设置为false,以将光标放置在末尾
      sel.removeAllRanges(); // 清除现有的范围
      sel.addRange(range); // 添加新的范围
    }
  });
</script>

这个代码的核心就是这个 createRange 建立一个块选区域,限定在 editableElement 里面然后修改光标位置,替换掉此前选择的块选区域。

Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 5 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君