Question

我想更改textarea的大小onClick复选框

当它未经检查时，Textarea将有8行，

当它被检查时，Textarea将有7行+ 1个文本字段。

有办法吗？

HTML

   <textarea *ngIf="mode === 1" id="message" rows="8" (ngModelChange)="updateV($event)" [ngModel]="message" value="MessageFinal"
        </textarea>

我的ToggleItem（支票）

  <ion-toggle class="toggle-small" toggle-class="toggle-calm"   (ionChange)="AddChild(ioToggle.checked)"  #ioToggle ></ion-toggle>

AddChild_function.ts

addChild(state) {
    const messageTextarea = (<HTMLInputElement>document.getElementById('message'));
    console.log(this.rows) // will give me how much i have when i check or uncheck
    console.log(messageTextarea)

    if (state === true) {
      this.messageTextarea.rows=7
      console.log(messageTextarea)

    } else if (state === false) {
this.messageTextarea.rows=8
    }

Answer 1

只需给复选框一个onclick even和一个ID，给textarea一个ID并使用document.getElementById()函数来操作元素属性。

<!doctype html>
<html lang="en-US">
<head>
</head>

<body>

<input id="check1" type="checkbox" onclick="resizeTextarea()" />
<textarea id="textArea" rows="7" col="50" ></textarea>

<script type='text/javascript'>
    function resizeTextarea(){
        var checked = document.getElementById("check1").checked;

        if(checked)
             document.getElementById('textArea').rows = "8";      
        else
            document.getElementById('textArea').rows = "7";  
    }
</script>

</body>
</html>

更改尺寸Textarea onCheck

1 个答案: