Question

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

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

我发现奇怪的是，在Chrome中，单击按钮以将光标设置在文本区域的末尾会失败，但是在最新的FireFox中，单击同一按钮会将光标放置在文本区域的开始。

问题

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

不幸的是，我无法回答为什么$('a').click(function() { $('html , body').stop().animate({ scrollTop: $('[name="' + this.hash.substr(1) + '"]').offset().top + $(window).scrollTop() }, 500); return false; });不能在FireFox中按预期工作在文本区域上-我从来没有想过要这样做。

如果有帮助，这是placeCaretAtEnd的变体，可在两种浏览器中使用：

placeCursorAtEndofTextArea

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中定位？

2 个答案: