当用户在长文本中间插入换行符时，如何防止Chrome的文本区域中的光标跳到顶部？

如何解决当用户在长文本中间插入换行符时，如何防止Chrome的文本区域中的光标跳到顶部？

如果您的<textarea>包含大量文本（即，文本区域的高度的两倍多），则当用户在中间插入换行符时，Chrome会滚动文本，使光标位于<textarea>的顶部。这种行为使用户感到迷惑，因为他们必须手动滚动文本区域才能将内容从上看回到视图中。 Firefox和Safari都没有这种行为。

复制步骤：

创建一个<textarea>
在其中粘贴很多文本
将光标置于文本中间
按 Enter

预期的行为：光标在文本区域中的相对位置保持不变。

实际行为：文本滚动以使光标位于文本区域的顶部。

重申一下，Safari或Firefox不会不会发生此行为。它特定于Chrome。

有什么方法可以抑制Chrome中的这种行为并使它的行为更像Firefox和Safari？

解决方法

这是一种方法：

Detect Chrome
Count how many line breaks用于文本区域
在输入之前，请检查文本区域的滚动位置
在input之后，查看换行符的数量是否增加（即用户是否输入了换行符）。如果是这样，则重置滚动位置。

（注意：beforeinput事件已经是supported by Chrome，但是assumed not to be supported是Chrome for iOS的，因此在这种情况下，可以使用scroll事件。如果愿意，您可以可以简单地在所有情况下启用滚动事件。）

function getChromeType() {
  //source: https://stackoverflow.com/questions/4565112/javascript-how-to-find-out-if-the-user-browser-is-chrome/13348618#13348618
  // please note,// that IE11 now returns undefined again for window.chrome
  // and new Opera 30 outputs true for window.chrome
  // but needs to check if window.opr is not undefined
  // and new IE Edge outputs to true now for window.chrome
  // and if not iOS Chrome check
  // so use the below updated condition
  var isChromium = window.chrome;
  var winNav = window.navigator;
  var vendorName = winNav.vendor;
  var isOpera = typeof window.opr !== "undefined";
  var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
  var isIOSChrome = winNav.userAgent.match("CriOS");

  if (isIOSChrome) {
    // is Google Chrome on IOS
    return 1;
  } else if (
    isChromium !== null &&
    typeof isChromium !== "undefined" &&
    vendorName === "Google Inc." &&
    isOpera === false &&
    isIEedge === false
  ) {
    // is Google Chrome
    return 2;
  } else {
    // not Google Chrome 
    return 0;
  };
};

function handleChromeTextarea(el,useScroll) {
  let getNoLineBreaks = () => {
    //source: https://stackoverflow.com/questions/10950538/how-to-detect-line-breaks-in-a-text-area-input
    return (el.value.match(/\n/g) || []).length;
  };

  let getScrollPos = () => {
    return el.scrollTop;
  };

  let onInput = (e) => {
    const newNoLineBreaks = getNoLineBreaks();

    if (noLineBreaks < newNoLineBreaks) {
      el.scrollTop = scrollPos;
    };

    noLineBreaks = newNoLineBreaks;
  };

  let onBeforeInput = (e) => {
    scrollPos = getScrollPos();
  };

  let noLineBreaks = getNoLineBreaks();
  let scrollPos = getScrollPos();

  el.addEventListener("input",onInput);
  el.addEventListener("beforeinput",onBeforeInput); //Already supported by Chrome - you may wish to use this without the scroll event

  if (useScroll) {
    el.addEventListener("scroll",onBeforeInput);
  };
};


const chromeType = getChromeType();

if (0 < chromeType) {
  handleChromeTextarea(document.getElementById("textarea"),(chromeType === 1));
};

<textarea id="textarea">
  Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Libero justo laoreet sit amet cursus. Massa eget egestas purus viverra. Quisque id diam vel quam elementum. Amet mauris commodo quis imperdiet. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Eu non diam phasellus vestibulum lorem. Morbi leo urna molestie at elementum. Massa massa ultricies mi quis hendrerit. Augue lacus viverra vitae congue eu consequat ac felis donec. Et ligula ullamcorper malesuada proin libero nunc consequat. Tincidunt dui ut ornare lectus sit amet est placerat in. Massa tempor nec feugiat nisl. Cursus euismod quis viverra nibh.

Quam lacus suspendisse faucibus interdum posuere lorem ipsum. Ut etiam sit amet nisl purus in. Magna sit amet purus gravida quis blandit turpis cursus. Sollicitudin ac orci phasellus egestas tellus rutrum tellus pellentesque. Aliquam nulla facilisi cras fermentum odio eu. Laoreet sit amet cursus sit. Fermentum iaculis eu non diam phasellus vestibulum. Feugiat in fermentum posuere urna nec tincidunt praesent semper feugiat. Dictum fusce ut placerat orci nulla pellentesque. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.

Ullamcorper malesuada proin libero nunc consequat interdum varius sit amet. Blandit massa enim nec dui nunc mattis enim ut tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Neque gravida in fermentum et sollicitudin ac orci. Blandit volutpat maecenas volutpat blandit aliquam. Felis donec et odio pellentesque diam. In cursus turpis massa tincidunt dui ut ornare lectus. Et malesuada fames ac turpis. Amet massa vitae tortor condimentum lacinia quis vel eros. Viverra vitae congue eu consequat ac. Pretium lectus quam id leo. Malesuada fames ac turpis egestas. In est ante in nibh mauris cursus mattis molestie a. Vel pharetra vel turpis nunc eget lorem dolor sed. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Risus feugiat in ante metus dictum at. Aliquet sagittis id consectetur purus ut faucibus. Sem et tortor consequat id.

Mi sit amet mauris commodo. Senectus et netus et malesuada fames. Adipiscing commodo elit at imperdiet dui accumsan. Felis eget nunc lobortis mattis aliquam. Nunc mattis enim ut tellus elementum sagittis vitae. Vitae nunc sed velit dignissim sodales ut eu sem. Mauris nunc congue nisi vitae suscipit. Id neque aliquam vestibulum morbi blandit cursus risus at ultrices. Laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus vitae. In egestas erat imperdiet sed euismod nisi porta lorem mollis.

Nisl rhoncus mattis rhoncus urna neque viverra justo nec. Fames ac turpis egestas integer eget aliquet nibh. Nunc consequat interdum varius sit amet. Magna fringilla urna porttitor rhoncus dolor purus non enim. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Integer enim neque volutpat ac tincidunt vitae semper. Mauris vitae ultricies leo integer malesuada nunc vel risus commodo. Proin nibh nisl condimentum id venenatis a condimentum. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan. Eget nunc scelerisque viverra mauris. Accumsan sit amet nulla facilisi morbi tempus. Justo eget magna fermentum iaculis eu non. Fusce id velit ut tortor pretium viverra. Quam quisque id diam vel. Ut sem viverra aliquet eget sit amet tellus. At in tellus integer feugiat scelerisque varius morbi enim nunc. Leo vel fringilla est ullamcorper eget.
</textarea>

当用户在长文本中间插入换行符时，如何防止Chrome的文本区域中的光标跳到顶部？

如何解决当用户在长文本中间插入换行符时，如何防止Chrome的文本区域中的光标跳到顶部？

解决方法

相关推荐