如何使用JavaScript/jQuery创建自动调整textarea的大小?

2021年3月31日16:32:01 发表评论 1,198 次浏览

本文概述

创建一个文本区域, 任务是在我们键入或粘贴内容时自动调整其大小。可以通过使用JavaScriptjQuery来实现。

方法1:使用JavaScript:要更改高度, 将创建一个新功能, 该功能会更改文本区域的style属性。首先将textarea的高度设置为auto。此值使浏览器自动设置元素的高度。这将使文本可滚动, 因为textarea高度小于文本。紧接在下一行, 高度再次设置为等于scrollHeight的高度。

的scrollHeight属性用于返回元素的整个高度, 包括以像素为单位的填充。这将使textarea高度等于整个文本区域的高度, 从而有效地调整textarea的大小以适合文本。

只要输入或文本区域的值发生更改, 就会触发"输入"事件。可以使用addEventListener()方法。此方法的回调函数设置为上面创建的新函数。每当检测到任何文本输入时, 这都会触发文本区域的大小调整, 因此会根据要键入或粘贴的文本自动调整大小。

例子:  

HTML

<!DOCTYPE html>
< html >
 
< head >
     < title >
         How to create auto-resize textarea
         using JavaScript/jQuery?
     </ title >
 
     < style >
         #autoresizing {
             display: block;
             overflow: hidden;
             resize: none;
         }
     </ style >
</ head >
 
< body >
     < h1 style = "color: green" >
         lsbin
     </ h1 >
     
     < b >
         Creating a textarea with
         auto-resize in JavaScript
     </ b >
     
     
< p >
         The textarea below will resize
         automatically accounting for
         cut, paste and typing text.
     </ p >
 
     
     < textarea id = "autoresizing" >
         Try cutting, pasting
         or typing here
     </ textarea >
     
     < script type = "text/javascript" >
         textarea = document.querySelector("#autoresizing");
         textarea.addEventListener('input', autoResize, false);
     
         function autoResize() {
             this.style.height = 'auto';
             this.style.height = this.scrollHeight + 'px';
         }
     </ script >
</ body >
 
</ html >

输出如下: 

  • 在编写任何文本之前:
js-input-before
  • 写完文字后:
js输入之后

方法2:使用jQuery:它类似于上面所使用的方法。jQuery中的on()方法用于将事件处理程序附加到任何元素。textarea首先被选中,这个方法用于对选中的元素应用事件处理程序。

在回调中声明了一个新函数, 该函数更改了textarea的style属性。首先将文本区域的高度设置为"自动", 然后在下一行立即将其高度再次设置为等于scrollHeight.

这样可以使文本区域的高度等于整个文本区域的高度, 从而有效地调整文本区域的大小以适合文本。每当检测到输入变化并且文本区域似乎会自动调整大小时, 将执行此功能。

例子:  

HTML

<!DOCTYPE html>
< html >
 
< head >
     < title >
         How to create auto-resize textarea
         using JavaScript/jQuery?
     </ title >
     
     < script src =
"https://code.jquery.com/jquery-3.4.1.min.js" >
     </ script >
     
     < style >
         #autoresizing {
             display: block;
             overflow: hidden;
             resize: none;
         }
     </ style >
</ head >
 
< body >
     < h1 style = "color: green" >
         lsbin
     </ h1 >
     
     < b >
         Creating a textarea with
         auto-resize in JavaScript
     </ b >
     
     
< p >
         The textarea below will resize
         automatically accounting for cut, paste and typing text.
     </ p >
 
     
     < textarea id = "autoresizing" >
         Try cutting, pasting or typing here
     </ textarea >
     
     < script type = "text/javascript" >
         $('#autoresizing').on('input', function () {
             this.style.height = 'auto';
             
             this.style.height =
                     (this.scrollHeight) + 'px';
         });
     </ script >
</ body >
 
</ html >

输出如下: 

  • 在编写任何文本之前:
jq-input-before
  • 写完文字后:
jq输入后

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: