JavaScript 如何改变textarea的形状

Textarea是一种具有动态宽度和高度的盒子，这意味着当文本被输入其中时，文本不会溢出，只会被这个texarea所包含，因为它可以动态地增加或减少其高度和宽度。textarea主要用于在表单中获取用户的完整地址和其他一些具有较大文本内容的内容。

通常情况下，文本区域是以方形或矩形的形式出现的，它可以使用JavaScript和CSS来改变。在这篇文章中，我们将学习使用JavaScript改变textarea的形状的方法。

为了用JavaScript改变textarea的形状，我们可以使用不同的CSS属性，用不同的值来塑造textarea的不同结构。

将textarea改为平行四边形

要将textarea的形状变成平行四边形，我们可以在JavaScript中使用CSS的 style.transform 属性，其值以 skew() 的形式给出。

语法

下面的语法将帮助你理解，你如何使用上述方法来改变textarea的形状：

selected_textarea.style.transform = "skew(40deg)";

让我们通过在一个代码实例中实际实现它来详细了解它，看看它是如何改变文本区域的形状的。

算法

第1步 -- 在第1步中，我们将在HTML文档中添加一个textarea，稍后我们将使用JavaScript改变其形状。
第2步– 在这一步，我们将添加一个带有onclick事件的按钮元素，当按钮被点击时，它将调用一个函数并改变textarea的形状。
第 3步– 在下一步，我们将定义一个JavaScript函数，在这个函数中，我们将抓取textarea元素，并使用上面写的语法将其形状改为平行四边形。
第4步– 在最后一步，我们将把这个JavaScript函数作为一个值分配给按钮的onclick事件，这样当按钮被点击时就可以调用这个函数。

例子

下面的例子将向你解释如何使用CSS的 transform 属性将文本区域的形状改变为平行四边形。

<html>
<body>
   <h2>Change the shape of a textarea</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.transform = "skew(50deg)";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to parallelogram using style.transform = 'skew(50deg)'";
      }
   </script>
</body>
</html>

在上面的例子中，我们使用了带有skew()值的transform属性来改变textarea的形状为平行四边形。

将textarea的形状改为椭圆

要将textarea的形状变成一个椭圆，我们可以在JavaScript中使用CSS的borderRadius属性，其值为50%。

语法

使用 borderRadius 属性将textarea的形状改变成椭圆，可以遵循以下语法：

selected_textarea.style.borderRadius = "50%";

让我们看看这个方法的实际执行情况，以了解它的工作情况。

算法

这个例子的算法与前一个例子的算法几乎相似。你只需要做一些小的改动，用 borderRadius 属性代替前一个例子中的 transform 属性，并给它一个 50% 的值，以得到椭圆形状的文本区域。

例子

下面的例子将说明如何使用borderRadius来改变textarea的形状，使其成为一个椭圆。

<html>
<body>
   <h2>Change the shape of a textarea to an ellipse</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.borderRadius = "50%";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to ellipse using style.borderRadius = '50%'";
      }
   </script>
</body>
</html>

在上面的例子中，我们用JavaScript在 borderRadius 属性的帮助下将textarea的形状从矩形变成了椭圆。

在这篇文章中，我们详细讨论了将textarea的形状改变成两种不同形状的方法，并为每一种方法提供了代码示例。也有可能使用JavaScript中的其他CSS属性将textarea的形状改变成其他形状，所以请继续搜索并继续学习。