3

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

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

我可以在不使用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>

4

1 回答 1

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>

于 2019-03-19T08:55:58.820 回答