Почему курсор не позиционируется в конце только в FireFox? - PullRequest
Новая
       28

Почему курсор не позиционируется в конце только в FireFox?

0 голосов
/ 01 декабря 2018

Я использую JavaScript, чтобы поместить курсор в конец текста в редактируемом абзаце и элементах textarea.

Пример моего кода в действии можно увидеть по адресу: Демонстрация моего кода

Что я нахожу странным, так это то, что в 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>

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

в кратком ответе, это потому, что 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>
0 голосов
/ 01 декабря 2018

К сожалению, я не могу ответить, почему placeCaretAtEnd не работает с текстовыми областями, как ожидалось в FireFox - я никогда не думал о попытке сделать это таким образом.

Если это поможет, вотвариант placeCursorAtEndofTextArea, который работает для меня в обоих браузерах: 

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