javascript - 文本区域在调整大小时获得准确的光标位置

Question

我的文本区域没有最大长度限制。默认情况下，它以多行显示文本。目前是这样的:

• 在焦点 [使用鼠标指针] 上，文本应移动到一行中
• 光标位置应捕捉
• 文本区域高度变为自动
• 光标位置应该移动到捕获的地方
• 并且应该在文本区域中查看

我可以在不使用 setTimeout() 的情况下实现同样的效果吗？尝试了很多方法，但在不使用 setTimeout() 的情况下没有得到预期的输出。

非常感谢任何建议和意见。谢谢。

$('textarea').focus(function() {
  setTimeout(function() {
    $('textarea').css({
      'height': 'auto',
      'white-space': 'nowrap'
    });
    $('textarea')[0].scrollLeft 
      = (
          $('textarea')[0].selectionStart 
          * (
            $('textarea')[0].scrollWidth / $('textarea').val().length
          )
        ) - 20;
  }, 1);
});
$('textarea').blur(function() {
  $(this).css({
    'white-space': 'normal'
  });
  $(this).css({
    'height': $(this)[0].scrollHeight + 'px'
  });
});

textarea#workingTA {
  resize: none;
  border-radius: 5px;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  direction: ltr;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="workingTA" cols="35"></textarea>

Answer 1

您应该使用click 监听器，而不是focus 监听器

我还对您的代码进行了一些重构:)

;(function() {
  var click = function(e) {
    var el = e.target;
    var $el = $(el);
    el.classList.remove('normal')
    el.classList.add('auto')

    $el.height('auto')
    el.scrollLeft = el.selectionStart * el.scrollWidth / $el.val().length - $(el).width() / 2;
  }
  
  var blur = function(e) {
    var el = e.target;
    var $el = $(el);
    el.classList.add('normal')
    el.classList.remove('auto')
    
    $el.height(el.scrollHeight)

  }
  
  $(document)
    // this is the important part: 'click' works, but 'focus' doesn't
    .on('click', 'textarea', click)
    .on('blur', 'textarea', blur)
  ;
  $(window)
    .on('load', function() {
      $('textarea').trigger('blur')
    })
  ;
})();

textarea.workingTA {
  resize: none;
  border-radius: 5px;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  direction: ltr;
  padding: 10px;
  vertical-align: top;
}

textarea.auto {
  white-space: nowrap;
}

textarea.normal {
  white-space: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="workingTA" class="workingTA normal" cols="35">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis congue consequat. Aenean tortor erat, euismod ut elit vitae, placerat efficitur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus egestas pulvinar lacus nec varius. Aliquam erat volutpat. Fusce risus risus, luctus eget purus ut, consequat viverra dolor. Pellentesque euismod, nisl eu rhoncus facilisis, ligula ligula fringilla mauris, a tempor tortor mi eget augue. Ut at semper turpis. Fusce lectus lectus, finibus eu imperdiet eget, dictum ac nisl. Aliquam at dapibus magna. In hac habitasse platea dictumst. Vestibulum interdum blandit lectus, id rhoncus dolor imperdiet id. Phasellus condimentum lacinia sapien non mattis. Nulla a lectus nisi. Aenean et nunc vel nibh pulvinar blandit. Nulla eget dictum leo. Curabitur elementum purus non erat pharetra pharetra. Ut et ante eget diam eleifend porttitor. Ut convallis leo ac urna ultricies scelerisque sed ac odio. Phasellus vehicula tempor varius. Donec accumsan ullamcorper ultrices. Maecenas nec luctus arcu. Proin non odio libero. Cras vitae nisi scelerisque, ullamcorper eros volutpat, euismod nibh. Nam diam orci, elementum vel sapien nec, mattis auctor quam.
</textarea>


<textarea id="workingTA2" class="workingTA normal" cols="35">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis congue consequat. Aenean tortor erat, euismod ut elit vitae, placerat efficitur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus egestas pulvinar lacus nec varius. Aliquam erat volutpat. Fusce risus risus, luctus eget purus ut, consequat viverra dolor. Pellentesque euismod, nisl eu rhoncus facilisis, ligula ligula fringilla mauris, a tempor tortor mi eget augue. Ut at semper turpis. Fusce lectus lectus, finibus eu imperdiet eget, dictum ac nisl. Aliquam at dapibus magna. In hac habitasse platea dictumst. Vestibulum interdum blandit lectus, id rhoncus dolor imperdiet id. Phasellus condimentum lacinia sapien non mattis. Nulla a lectus nisi. Aenean et nunc vel nibh pulvinar blandit. Nulla eget dictum leo. Curabitur elementum purus non erat pharetra pharetra. Ut et ante eget diam eleifend porttitor. Ut convallis leo ac urna ultricies scelerisque sed ac odio. Phasellus vehicula tempor varius. Donec accumsan ullamcorper ultrices. Maecenas nec luctus arcu. Proin non odio libero. Cras vitae nisi scelerisque, ullamcorper eros volutpat, euismod nibh. Nam diam orci, elementum vel sapien nec, mattis auctor quam.
</textarea>

没有任何重构。好吧，稍微正确地处理多个文本区域

$('textarea').click(function(e) {
  $(e.target).css({
    'height': 'auto',
    'white-space': 'nowrap'
  });
  e.target.scrollLeft 
    = (
        e.target.selectionStart 
        * (
          e.target.scrollWidth / $(e.target).val().length
        )
      ) - 20;
});
$('textarea').blur(function(e) {
  $(e.target).css({
    'white-space': 'normal'
  });
  $(e.target).css({
    'height': e.target.scrollHeight + 'px'
  });
});

textarea.workingTA {
  resize: none;
  border-radius: 5px;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
  direction: ltr;
  padding: 10px;
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class="workingTA" cols="35">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis congue consequat. Aenean tortor erat, euismod ut elit vitae, placerat efficitur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus egestas pulvinar lacus nec varius. Aliquam erat volutpat. Fusce risus risus, luctus eget purus ut, consequat viverra dolor. Pellentesque euismod, nisl eu rhoncus facilisis, ligula ligula fringilla mauris, a tempor tortor mi eget augue. Ut at semper turpis. Fusce lectus lectus, finibus eu imperdiet eget, dictum ac nisl. Aliquam at dapibus magna. In hac habitasse platea dictumst. Vestibulum interdum blandit lectus, id rhoncus dolor imperdiet id. Phasellus condimentum lacinia sapien non mattis. Nulla a lectus nisi. Aenean et nunc vel nibh pulvinar blandit. Nulla eget dictum leo. Curabitur elementum purus non erat pharetra pharetra. Ut et ante eget diam eleifend porttitor. Ut convallis leo ac urna ultricies scelerisque sed ac odio. Phasellus vehicula tempor varius. Donec accumsan ullamcorper ultrices. Maecenas nec luctus arcu. Proin non odio libero. Cras vitae nisi scelerisque, ullamcorper eros volutpat, euismod nibh. Nam diam orci, elementum vel sapien nec, mattis auctor quam.</textarea>

<textarea class="workingTA" cols="35">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam venenatis congue consequat. Aenean tortor erat, euismod ut elit vitae, placerat efficitur magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus egestas pulvinar lacus nec varius. Aliquam erat volutpat. Fusce risus risus, luctus eget purus ut, consequat viverra dolor. Pellentesque euismod, nisl eu rhoncus facilisis, ligula ligula fringilla mauris, a tempor tortor mi eget augue. Ut at semper turpis. Fusce lectus lectus, finibus eu imperdiet eget, dictum ac nisl. Aliquam at dapibus magna. In hac habitasse platea dictumst. Vestibulum interdum blandit lectus, id rhoncus dolor imperdiet id. Phasellus condimentum lacinia sapien non mattis. Nulla a lectus nisi. Aenean et nunc vel nibh pulvinar blandit. Nulla eget dictum leo. Curabitur elementum purus non erat pharetra pharetra. Ut et ante eget diam eleifend porttitor. Ut convallis leo ac urna ultricies scelerisque sed ac odio. Phasellus vehicula tempor varius. Donec accumsan ullamcorper ultrices. Maecenas nec luctus arcu. Proin non odio libero. Cras vitae nisi scelerisque, ullamcorper eros volutpat, euismod nibh. Nam diam orci, elementum vel sapien nec, mattis auctor quam.</textarea>