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

时间：2019-03-19 07:42:33

标签： javascript html

我的textarea没有maxlength的限制。默认情况下，它以多行显示文本。当前如下：

  • 重点[使用鼠标指针]，文本应移到一行
  • 光标位置应捕获
  • 文本区域高度将自动变为
  • 光标位置应在捕获位置移动
  • 它应该在文本区域中查看

如果不使用UserPlaylist，是否可以达到相同的效果。尝试了多种方法，但未使用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;
}

1 个答案:

答案 0 :(得分：0)

您应该使用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>

相关问题
最新问题