如何使用JavaScript更改文本区域的形状

文本区域是一种具有动态宽度和高度的框，这意味着当文本输入其中时，文本不会溢出，而只会被文本区域限制在内部，因为它可以动态地增加或减小其高度和宽度。文本区域主要用于表单中获取用户的完整地址和其他一些具有较大文本内容的内容。

通常，文本区域以正方形或长方形的形式存在，可以使用JavaScript和CSS改变它的形状。在本文中，我们将学习如何使用JavaScript更改文本区域的形状的方法。

为了使用JavaScript更改文本区域的形状，我们可以使用不同的CSS属性和不同的值来将文本区域塑造成不同的结构。

将文本区域更改为平行四边形

为了将文本区域的形状更改为平行四边形，我们可以在JavaScript中使用CSS的 style.transform 属性，并结合给定值 skew() 。

语法

以下语法将帮助您理解如何使用上述方法来更改文本区域的形状：

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

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

步骤

步骤1 - 在步骤1中，我们将向 HTML 文档添加一个文本区域，稍后将使用 JavaScript 改变其形状。
步骤2 - 在这一步中，我们将添加一个带有 onclick 事件的按钮元素，当按钮被点击时调用一个函数并改变文本区域的形状。
步骤3 - 在下一步中，我们将定义一个 JavaScript 函数，在其中获取文本区域元素并使用上述语法将其形状改变为平行四边形。
步骤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>

在上面的示例中，我们使用了transform属性，其值为skew()，以将文本区域的形状改变为平行四边形。

将文本区域的形状改变为椭圆

要将文本区域的形状改变为椭圆，我们可以使用CSS的borderRadius属性，值为50%的JavaScript。

语法

以下语法可用于使用borderRadius属性将文本区域的形状改变为椭圆： borderRadius 属性−

selected_textarea.style.borderRadius = "50%";

让我们看一下这种方法的实际实现，以了解其工作原理。

步骤

这个示例的算法与之前的示例几乎相似。您只需要通过用 borderRadius 属性替换之前示例中的 transform 属性，并给它一个值为 50% ，以获得文本区域的椭圆形状。

示例

以下示例将演示使用borderRadius改变文本区域形状为椭圆形-

<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 属性。

在本文中，我们详细讨论了使用代码示例将的形状改为两种不同形状的两种不同方法。可能还可以使用JavaScript中的其他CSS属性将的形状改为其他形状，因此继续搜索和学习。