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

Question

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

• 在焦点[使用鼠标指针]，文本应移动到一行
• 应捕捉光标位置
• Textarea高度变为自动
• 光标位置应在捕获的位置移动
• 它应该在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> 

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> 

没有任何重构。 好吧，有点正确解决多个textareas

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