text area getting accurate cursor position on resize

问题: I've textarea with no limit of maxlength. As default thing, it displays text in multiple line. Currently it is as follows: on focus [using mouse pointer], text should...

问题:

I've textarea with no limit of maxlength. As default thing, it displays text in multiple line. Currently it is as follows:

  • on focus [using mouse pointer], text should move into one line
  • the cursor position should capture
  • Textarea height to become auto
  • the cursor position should move at captured place
  • and it should be viewed in the textarea

Can I achieve the same without using setTimeout(). Tried many ways but didn't get output as expected without using setTimeout().

Any suggestions and comments are highly appreciated. Thank you.

$('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>


回答1:

You should use the click listener, not the focus listener

Also I did some refactoring of your code :)

;(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>

Without any refactoring. Well, a little bit to address multiple textareas correctly

$('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>

  • 发表于 2019-03-20 06:57
  • 阅读 ( 228 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除