Question

我在我看来有这个代码..

<span class="bold">Comment:
  <%=Html.TextAreaFor(model => model.Comment, new { })%>
</span>

注释字段从数据库填充。数据库中的文本太长，无法放入textarea的可见区域。我被要求在文本区域旁边创建一个链接，当单击该链接时，会在“弹出气泡”中显示textarea的全部内容。

这可以使用jQuery吗？

Answer 1

让我们把你的问题分成两部分;从textarea中获取值并在工具提示中显示该值。

使用当前stackoverflow“您的答案”表单作为示例表单，开始输入新答案，然后在浏览器控制台中运行：

$("#wmd-input").val()

对我来说，它现在看起来有点像这样：

“让我们解决你的问题...

现在，您必须决定如何使用one many available的options来显示工具提示（或者只是滚动自己的工具提示）。

Answer 2

这样的事情可以解决问题

在jsFiddle上查看 http://jsfiddle.net/GmBqy/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" 
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  <script type="text/javascript">
      $(function() {
        $("a.viewtext").click(function(e) {
          e.preventDefault();
          var textarea = $($(this).attr("href"));
          var popup = $("<div class='popup'><span class='close'>Close</span></div>");
          var closeButton = $("<span class='close'>Close</span>").appendTo(popup);
          closeButton.click(function() {
           $(this).closest(".popup").remove();                                                                                  
          });
          $("<div></div>").text(textarea.val()).appendTo(popup);
          textarea.after(popup);
        });
      });
    </script>
  <style type="text/css">
  .popup {
      position: absolute;
      top: 10%;
      left: 10%;
      width: 50%;
      background: #eee;
      border: solid 5px #000;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 0 0 20px #000;
      -webkit-box-shadow: 0 0 20px #000;
      box-shadow: 0 0 20px #000;
  }
  .popup div {
      padding: 20px;
  }
  .popup .close {
      font: bold 11px sans-serif;
      position: absolute;
      top: 0;
      right: 0;
      background: #333;
      color: #fff;
      padding: 3px 6px;
      cursor: pointer;
  }
  </style>
</head>
<body>
  <textarea id="myTextField">It is a long established fact that 
  a reader will be distracted by the readable content of a page 
  when looking at its layout. The point of using Lorem Ipsum is 
  that it has a more-or-less normal distribution of letters, as 
  opposed to using 'Content here, content here', making it look.
  </textarea>
  <a class="viewtext" href="#myTextField">View Contents</a>
</body>
</html>

Answer 3

是的，它实际上是可能的。

Answer 4

您可以在模型上为缩短的评论文本创建另一个属性，然后将完整的评论文本存储在隐藏的范围内。

这是一个让你入门的例子：

<style type="text/css">
  .commentFullText {
    display: none;
  }
</style>

<script type="text/javascript">
  $(function() {
    $('.showFullComment').click(function() {
      $(this).parent().find('.commentFullText').show();
    });
  });
</script>

<span class="bold">Comment:
  <%=Html.TextAreaFor(model => model.CommentShortened, new { })%>
  <a href="#" class="showFullComment">More...</a>
  <span class="commentFullText"><%=Html.TextAreaFor(model => model.Comment, new { })%></span>
</span>

如何使用link ...使用jquery使整个textarea可读

4 个答案: