Question

此外，不应该有任何可见的分隔符（:)分割textarea。目前我用（:) seperator完成了它。我需要将它与span标签分开，这可能是不可见的。以下是给出的代码：

HTML代码：

<div class="container">
  <h3 class="text-center text-primary">TextArea Concatenate and Revert</h3>
  <form method="post" accept-charset="utf-8" action="">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <textarea id="text_area_1" rows="14" cols="100"></textarea>
    </div>
  </div>

  <div class="row">
    <div class="col-md-2 col-md-offset-5 border">
      <img src="images/signature.png" alt="signature">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-md-offset-1">
      <textarea id="text_area_2" rows="6" cols="50"></textarea>
    </div>
    <div class="col-md-4 col-md-offset-1">
      <textarea id="text_area_3" rows="6" cols="50"></textarea>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <p>স্মারক নম্বর: ০৫.৪৫.৩৯০০.০১১.৬১.০০১.১৭.৫৬/১</p>
    </div>
    <div class="col-md-2 col-md-offset-2 border">
      <img src="images/signature.png" alt="signature">
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 col-md-offset-1">
      <textarea id="text_area_4" rows="6" cols="50"></textarea>
    </div>
    <div class="col-md-4 col-md-offset-1">
      <textarea id="text_area_5" rows="6" cols="50"></textarea>
    </div>
  </div>
  <button type="button" class="btn btn-success" onclick="concatenate()">Concatenate</button>
  </form>
  <hr>
  <div class="row">
    <div class="col-md-12">
      <textarea id="text_area_6" rows="40" cols="180"></textarea>
    </div>
  </div>

  <button type="button" class="btn btn-warning" onclick="revert()">Revert</button>
</div>

风格：

.border{
border: 1px solid;}

使用Javascript：

<script>

    var one = document.getElementById("text_area_1");
    var two = document.getElementById("text_area_2");
    var three = document.getElementById("text_area_3");
    var four = document.getElementById("text_area_4");
    var five = document.getElementById("text_area_5");
    var six = document.getElementById("text_area_6");


    function concatenate(){
      six.value = one.value + ":" + two.value+ ":" + three.value+ ":" + four.value+ ":" + five.value;
      one.value = "";
      two.value = "";
      three.value = "";
      four.value = "";
      five.value = "";
      }

    function revert(){
        var val = six.value.split(":");
        one.value = val[0];
        two.value = val[1];
        three.value = val[2];
        four.value = val[3];
        five.value = val[4];
        six.value = "";
        }

</script>

Answer 1

通过使用全局变量（或多个变量），您可以在单击concatenate按钮时指定值，稍后单击revert按钮时可以使用这些值。

<!doctype html>
<html>
    <head>
        <title>Concatenate() & revert()</title>
        <script>
            var texts={
                'text_area_1':'',
                'text_area_2':'',
                'text_area_3':'',
                'text_area_4':'',
                'text_area_5':''
            };
            var target='text_area_6';

            function $(id){
                return document.getElementById(id);
            }
            function combine(o,b){
                if( typeof( o )=='object' ){
                    var t=[];
                    var a=arguments;
                    var e=( a.length==3 ) ? a[2]:false;
                    var s=( a.length==4 ) ? a[3]:'=';
                    for( var n in o ){
                        if( b && typeof( o[ n ] )=='object' ) t.push( combine( o[ n ], b, e, s ) );
                        else t.push( o[ n ] );
                    }
                    return t;
                }
                return o;   
            }
            function concatenate(){
                var keys=Object.keys(texts);
                for( k in keys ){
                    texts[ keys[ k ] ]=$( keys[ k ] ).value;
                    $( keys[ k ] ).value='';
                }
                $(target).value=combine( Object.values(texts).join(' '),0 );
            }
            function revert(){
                var keys=Object.keys( texts );
                for( k in keys ){
                    $( keys[ k ] ).value=texts[ keys[ k ] ];
                }
                $(target).value='';
            }

        </script>
    </head>
    <body>
    <div class="container">
      <h3 class="text-center text-primary">TextArea Concatenate and Revert</h3>
      <form method="post" accept-charset="utf-8" action="">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <textarea id="text_area_1" rows="14" cols="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id imperdiet mi. Donec velit orci, consectetur sit amet mi id, eleifend pretium lorem. Integer orci ex, suscipit sit amet dui id, mollis condimentum elit. Fusce blandit quis magna eu malesuada. In hac habitasse platea dictumst. Nam tristique nunc at mauris porta elementum. Pellentesque ut lacinia metus, lacinia mollis odio. Praesent sed viverra metus. Phasellus non tristique nisl, ut congue erat. Aliquam neque leo, blandit eu varius id, mattis vel tellus.</textarea>
        </div>
      </div>

      <div class="row">
        <div class="col-md-2 col-md-offset-5 border">
          <img src="images/signature.png" alt="signature">
        </div>
      </div>

      <div class="row">
        <div class="col-md-4 col-md-offset-1">
          <textarea id="text_area_2" rows="6" cols="50">Etiam ullamcorper pulvinar tincidunt. Suspendisse scelerisque commodo nisl eget volutpat. Cras tristique quis eros lobortis blandit. Duis sed pellentesque est. Aenean sem ex, ultrices nec enim pharetra, placerat gravida turpis. Proin ultricies ultrices tellus ac condimentum. Aliquam nisl dolor, vulputate vitae risus vel, porta pulvinar ligula. Fusce dapibus rutrum pulvinar.</textarea>
        </div>
        <div class="col-md-4 col-md-offset-1">
          <textarea id="text_area_3" rows="6" cols="50">Sed eget rhoncus sapien, in dapibus metus. Mauris porta, massa nec sodales dignissim, dui est accumsan lorem, vel vulputate velit mi eget velit. In a suscipit eros, eget hendrerit dui. In in imperdiet tellus.</textarea>
        </div>
      </div>

      <div class="row">
        <div class="col-md-6">
          <p>?????? ?????: ??.??.????.???.??.???.??.??/?</p>
        </div>
        <div class="col-md-2 col-md-offset-2 border">
          <img src="images/signature.png" alt="signature">
        </div>
      </div>

      <div class="row">
        <div class="col-md-4 col-md-offset-1">
          <textarea id="text_area_4" rows="6" cols="50">Ut pellentesque nunc neque, nec mattis nisl commodo at. Aenean dictum tellus diam, vel scelerisque eros euismod quis. Nunc tellus mauris, suscipit at metus sed, pretium auctor arcu. Curabitur pretium pellentesque dictum. Pellentesque lacinia condimentum dictum. Praesent quis euismod lorem.</textarea>
        </div>
        <div class="col-md-4 col-md-offset-1">
          <textarea id="text_area_5" rows="6" cols="50">Sed justo diam, commodo consectetur porta vitae, ultricies non ipsum. Donec eget magna odio. Fusce in orci vel erat fringilla accumsan in sit amet lacus. Fusce diam sapien, ullamcorper quis auctor ac, tempor ut quam. Duis iaculis convallis nunc, sed faucibus erat pharetra quis.</textarea>
        </div>
      </div>
      <button type="button" class="btn btn-success" onclick="concatenate()">Concatenate</button>
      </form>
      <hr>
      <div class="row">
        <div class="col-md-12">
          <textarea id="text_area_6" rows="40" cols="180"></textarea>
        </div>
      </div>

      <button type="button" class="btn btn-warning" onclick="revert()">Revert</button>
    </div>
    </body>
</html>

如何将多个textarea连接成一个textarea并将该textarea动态拆分为多个textarea？

1 个答案: