JavaScript 如何更改textarea的形状

通常情况下，textarea的形状是矩形或方形的，但是这里我们将处理textarea的非常规形状，这意味着这个textarea不会是常规的形状，但是可编辑的。

方法1

在第一种方法中，让我们看看使用CSS形状和contenteditable属性创建的不规则可编辑的textarea。

示例：

<style> 
    div { 
        top: 124px; 
        margin-left: 150px; 
        outline: none; 
    } 
      
    #parallelogram { 
        color: white; 
        font-weight: bold; 
        width: 250px; 
        height: 200px; 
        transform: skew(20deg); 
        background: #f00; 
        overflow: hidden; 
    } 
      
    #eq-triangle { 
        width: 300px; 
        height: 0; 
        border-bottom: 104px solid blue; 
        /* 104 = 120 * 0.866 */ 
        border-left: 60px solid transparent; 
        border-right: 60px solid transparent; 
    } 
      
    .circle { 
        display: table-cell; 
        padding: 40px; 
        width: 200px; 
        height: 200px; 
        border-radius: 50%; 
        font-size: 30px; 
        color: #fff; 
        line-height: 50px; 
        text-align: center; 
        background: #40a977; 
        word-break: break-all; 
        justify-content: center; 
        overflow: hidden; 
    } 
</style> 
  
<h1>Parallelogram Shaped TextArea</h1> 
<label> 
    <h3>Enter Comments:</h3> 
</label> 
  
<div id="parallelogram" contenteditable="true"> 
    Enter the something... 
</div> 
  
<h1>eq-triangle shaped TextArea</h1> 
<label> 
    <h3>Enter Comments:</h3> 
</label> 
  
<div id="eq-triangle" contenteditable="true"> 
    Enter the something... 
</div> 
  
<h1>Circle shaped TextArea</h1> 
<label> 
    <h3>Enter Comments:</h3> 
</label> 
  
<div class="circle" contenteditable="true"> 
    Enter the something... 
</div>

输出：

方法2

使用JavaScript改变文本区域的形状。首先，通过id获取元素，然后使用 style.transform = “skew(40deg)”; 改变形状。

示例: 让我们使用JavaScript来创建不寻常的文本区域。

<style> 
    textarea { 
        color: brown; 
        font-weight: bold; 
        width: 250px; 
        height: 200px; 
        background: #ff7; 
        overflow: hidden; 
    } 
</style> 
<h1 style="color:green"> 
    GeeksforGeeks 
</h1> 
<center> 
    <textarea id="myP"> 
        Unusual shape of a textarea 
    </textarea> 
</center> 
<br> 
<button onclick="myFunction()"> 
    Try it 
</button> 
  
<p id="demo"></p> 
  
<script> 
    function myFunction() { 
        var x = document.getElementById( 
        "myP").style.transform = "skew(-30deg)"; 
        document.getElementById("demo").innerHTML = x; 
    } 
</script>

输出：