为什么仅在 FireFox 中光标不位于末尾？

Question

我正在使用一些 JavaScript 将光标放置在可编辑段落和文本区域元素中的文本末尾。

可以在以下位置查看我的代码示例：Demo of my code

我发现奇怪的是，在 Chrome 中，单击按钮以将光标位置设置在 textarea 的末尾失败，但在最新的 FireFox 中，单击相同的按钮会将光标置于 textarea 的开头。

问题

JavaScript 代码在 Chrome 和 FireFox 中表现不一致有什么问题？

同样的演示代码如下。

<button onclick="placeCursorAtEndofTextArea(); return false;">Place cursor at end of text area</button>

<button onclick="placeCursorAtEndofParagraph(); return false;">Place cursor at end of paragraph</button>

<br>
<br>
<textarea id="txtDescription" rows="10" cols="50">I am some text. I am some text. I am some text. I am some text.</textarea>

<br>
<br>
<p contentEditable>foo bar </p>

<style>
   p {
   border:1px solid green;
   }
   textarea {
   border: 1px solid red;
   }
</style>

<script>
   function placeCaretAtEnd(el) {
       el.focus();
       if (typeof window.getSelection != "undefined"
               && typeof document.createRange != "undefined") {
           var range = document.createRange();
           range.selectNodeContents(el);
           range.collapse(false);
           var sel = window.getSelection();
           sel.removeAllRanges();
           sel.addRange(range);
       } else if (typeof document.body.createTextRange != "undefined") {
           var textRange = document.body.createTextRange();
           textRange.moveToElementText(el);
           textRange.collapse(false);
           textRange.select();
       }
   }

   function placeCursorAtEndofTextArea() {
   placeCaretAtEnd( document.querySelector('#txtDescription'))
   }
   function placeCursorAtEndofParagraph() {
    placeCaretAtEnd( document.querySelector('p'))
   }

</script>

Answer 1

不幸的是，我无法回答为什么 placeCaretAtEnd 不能像 FireFox 中预期的那样在文本区域上工作 - 我从来没有想过要那样做。

如果有帮助，这里是 placeCursorAtEndofTextArea 的一个变体，适用于我的两种浏览器：

function placeCursorAtEndofTextArea() {
    var ta = document.querySelector('#txtDescription');
    ta.selectionStart = ta.selectionEnd = ta.value.length;
    ta.focus();
}

Answer 2

简而言之，这是因为textarea和contentEditable使用不同的选择模型。

我将其用于现代浏览器和 IE9+

function placeCaretAtEnd(el) {
  if (el.value) {
    // for textarea
    el.focus();
    el.setSelectionRange(el.value.length, el.value.length);
  }
  else {
    // contentEditable
    range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  }
}

function placeCursorAtEndofTextArea() {
  placeCaretAtEnd(document.querySelector('#txtDescription'))
}

function placeCursorAtEndofParagraph() {
  placeCaretAtEnd(document.querySelector('p'))
}

p {border: 1px solid green;}
textarea {border: 1px solid red;}
textarea:focus::-webkit-input-placeholder{color: transparent;}
textarea:focus::-webkit-textarea-placeholder {content: "";}

<button onclick="placeCursorAtEndofTextArea(); return false;">Place cursor at end of text area</button>

<button onclick="placeCursorAtEndofParagraph(); return false;">Place cursor at end of paragraph</button>

<br><br>
<textarea id="txtDescription" rows="10" cols="50">I am some text. I am some text. I am some text. I am some text.</textarea>

<br><br>
<p contentEditable>foo bar </p>

为什么仅在 FireFox 中光标不位于末尾？

Why is cursor not being positioned at end in FireFox only?

html

javascript

cursor-position