Javascript 为什么光标不只是在FireFox中定位在末尾？

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

我的代码示例可在以下网址查看：

我感到奇怪的是，在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>

将光标放在文本区域的末尾
将光标放在段落末尾




我有一些文字。我有一些文字。我有一些文字。我有一些文字。




foo-bar
p{
边框：1px纯绿色；
}
文本区{
边框：1px纯红；
}
函数placeCaretAtEnd（el）{
el.focus（）；
if（typeof window.getSelection！=“未定义”
&&typeof document.createRange！=“未定义”）{
var range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
var sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}else if（typeof document.body.createTextRange！=“未定义”）{
var textRange=document.body.createTextRange（）；
textRange.moveToElementText（el）；
textRange.collapse（false）；
textRange.select（）；
}
}
函数placeCursorAtEndofTextArea（）{
placeCaretAtEnd（document.querySelector（“#txtDescription”））
}
函数placeCursorAtEndofParagraph（）{
placeCaretAtEnd（document.querySelector（'p'））
}

不幸的是，我无法回答为什么

placeCaretAtEnd

不能像FireFox中预期的那样在文本区域工作-我从来没有想过尝试这样做

如果有帮助的话，这里有一个在两种浏览器中都适用的

placecursorendoftextarea

变体：

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

---

简而言之，这是因为

textarea

和

contentEditable

使用了不同的选择模型

我在现代浏览器和IE9中使用它+

函数placeCaretAtEnd（el）{
如果（标高值）{
//用于文本区域
el.focus（）；
el.setSelectionRange（el.value.length，el.value.length）；
}
否则{
//内容可编辑
range=document.createRange（）；
范围。选择节点内容（el）；
范围。塌陷（假）；
selection=window.getSelection（）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}
函数placeCursorAtEndofTextArea（）{
placeCaretAtEnd（document.querySelector（“#txtDescription”））
}
函数placeCursorAtEndofParagraph（）{
placeCaretAtEnd（document.querySelector（'p'））
}

p{边框：1px纯绿色；}
text区域{边框：1px实心红色；}
textarea:focus:：-webkit输入占位符{color:transparent；}
textarea:focus:：-webkit textarea占位符{content:；}

将光标放在文本区域的末尾
将光标放在段落末尾



我有一些文字。我有一些文字。我有一些文字。我有一些文字。



foo-bar