如何禁用Modal中Textarea编辑时光标自动跳至末行的行为

这个问题我之前用Bootstrap Modal时也碰到过！核心原因是模态框显示时会自动聚焦到第一个可交互元素（也就是你的textarea），而浏览器默认聚焦textarea时会把光标定位到文本末尾。咱们可以通过以下几种方法禁用这个默认行为：

方法一：通过Modal事件手动控制光标位置 #

先给你的Modal容器加个ID方便选择（比如noteModal），然后监听Modal的shown.bs.modal事件，在模态框完全显示后恢复光标到用户点击的位置：

修改后的HTML（添加Modal ID） #

<div class="modal-dialog modal-lg" id="noteModal">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Not Düzenle</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <div class="modal-body">
      <textarea id="eventNote" rows="5" wrap="soft" class="form-control text-uppercase">ALBÜM MODELİ WOODY 2 LACİVERT RENK OLACAK.</textarea>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
      <button type="button" id="editNoteToOrganisationButton" class="btn btn-success">Düzenle</button>
    </div>
  </div>
</div>

JavaScript代码 #

// 监听Modal显示完成事件
document.getElementById('noteModal').addEventListener('shown.bs.modal', function() {
  const textarea = document.getElementById('eventNote');
  // 保存用户点击前的光标位置
  const startPos = textarea.selectionStart;
  const endPos = textarea.selectionEnd;
  
  // 手动聚焦并恢复光标位置
  textarea.focus();
  textarea.setSelectionRange(startPos, endPos);
});

方法二：直接拦截Textarea的聚焦行为 #

如果不想依赖Modal事件，也可以直接给textarea添加事件监听，提前保存光标位置并在聚焦时恢复：

const textarea = document.getElementById('eventNote');
let savedCursorStart = 0;
let savedCursorEnd = 0;

// 当用户点击textarea时，保存当前光标位置
textarea.addEventListener('mousedown', function() {
  savedCursorStart = this.selectionStart;
  savedCursorEnd = this.selectionEnd;
});

// 当textarea获得焦点时，恢复之前保存的光标位置
textarea.addEventListener('focus', function() {
  // 用setTimeout确保DOM渲染完成后再执行
  setTimeout(() => {
    this.setSelectionRange(savedCursorStart, savedCursorEnd);
  }, 0);
});

方法三：禁止Modal自动聚焦任何元素 #

如果你不需要Modal自动聚焦到任何元素，可以通过Bootstrap的Modal配置直接禁用这个行为：

$('#noteModal').modal({
  focus: false
});

这样Modal显示时就不会自动触发textarea的聚焦，光标位置就能保持在你点击的地方啦！

内容的提问来源于stack exchange，提问作者A.Hakan