Question

我有一个带有textarea的表单。

但是我没有足够的空间来放置一个大的文本区域。

所以我决定这样做：

我在表单上插入了一个高度很小的textarea，当有人点击这个textarea时，会出现一个内部有较大textarea的新框。

但是我在JQuery中使用Clone事件，因为我可以选择多次克隆我的表单。

问题是，我可以将信息插入到多个克隆的textareas中，但是当我点击特定的textarea时，它不会显示此textarea的当前值。

我只想添加多个包含信息的textareas，再次点击特定的textarea并在打开的Box中查看此textarea的当前值，我该怎么做？

JsFiddle在这里：

http://jsfiddle.net/3RLkE/

框中的代码：

.descBox
{
   display:none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    height: 300px;
    width: 500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    box-sizing: border-box;
    text-align: center;
    z-index: 1000;
}

脚本代码

  var Element=null;
      $(".clone").click(function(){
          $(".txtarea:first").clone(true).appendTo(".test");
          $('#txtareavalue').val('');
          $('.txtarea:last').val('');
      });

      $(".txtarea").click(function(){
          Element= $(this);
          $(".descBox").toggle();
      });

      $(".save").click(function(){
      $(".descBox").toggle();


      Element.val($('#txtareavalue').val());
      Element.text($('#txtareavalue').val());

      $('#txtareavalue').val('');
  });

HTML

  <div class="test">
     <input type="button" class="clone" value="clone" />

     <textarea type="text" class="txtarea"></textarea>

  </div>

Answer 1

像这样改写：

$(".txtarea").click(function(){
 Element= $(this);
$(".descBox textarea").val(Element.val());
$(".descBox").toggle();
})

这是你正在寻找的吗？

Answer 2

您必须设置该文本区域的内容。

$(".txtarea").click(function(){
    Element= $(this);
    $(".descBox").toggle();
    $('#txtareavalue').val(Element.val());
});

更新了小提琴：http://jsfiddle.net/3RLkE/2/

如何在textarea上显示特定文本？

2 个答案: