Javascript添加textarea的大小

Javascript adding textarea size

本文关键字:textarea 添加 Javascript      更新时间:2023-09-26

我有一个表单,它有一个文本区,包括几个按钮,我将添加一个额外的文本区,另一个将删除一个文本区,除非它是最后一个。它的工作原理,除了我想要每个文本区域的大小与原来的一样,但我只是无法找出我做错了什么。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <title>CPO Exit Form</title>
  <script type='text/javascript' src='Scripts/jquery-1.9.1.js'></script>
  <link rel="stylesheet" href = "Styles/Site2.css"></link>
<script type="text/javascript">
$(document).ready(function(){
  var counter = 2;
    $("#addButton").click(function () {
    if(counter>9){
      alert("Only 9 areas can be added to the form.");
      return false;
    }   
    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>');
    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
     });
       $("#removeButton").click(function () {
        if(counter==2){
         alert("This is the last area it cannot be removed from the form.");
         return false;
       }   
    counter--;
      $("#TextBoxDiv" + counter).remove();
    });
   });
 </script>
 </head>
 <body>
  <div class="total">
   <fieldset><legend>Action Items:</legend>
    <div id='TextBoxesGroup'>
     <div id="TextBoxDiv1">
      <label> 1 : </label><textarea style="width: 700px; height: 56px" max="255"></textarea>
     </div>
    </div>
  <input type='button' value='Add Button' id='addButton'>
  <input type='button' value='Remove Button' id='removeButton'>
 </body>
 </html>

你改这句话

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>')

后……

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 760px; height: 56px" rows="5" style="width: 764px">')

这是一个小bug,但是你在JavaScript中的style属性之后缺少=。(演示)

改变:

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style"width: 700px; height: 56px" max="255"></textarea>');

:

newTextBoxDiv.after().html('<label>'+ counter + ' : </label><textarea style="width: 700px; height: 56px" max="255"></textarea>');

一个更简洁的方法是使用CSS来设置你的<textarea>元素的样式,像这样:

textarea.Wide {
  width: 700px;
  height: 56px
}

然后你可以修改你的HTML(和JavaScript)如下:

<textarea class="Wide" max="255"></textarea>