Question

我正在尝试向我的jQuery移动应用程序添加“更改日志”。如果出现错误，用户应该具备查看错误的能力。因此我实现了一个带有textarea的弹出窗口（参见下面的代码）

        <!-- DIALOG Start-->
        <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Logg-Einträge:</h1>
        </div>
        <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea>
        <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a>    
        </div>
        </div>
        <!-- DIALOG End-->

此popUp填充了数据，并在单击特定按钮时打开：

$('#showLog').click(function() {
    $("#popupDialog").popup("close");
    // populate the textArea with the text
    $("#popupTextArea").text(sessionStorage.getItem("logStack"));
    // open popUp after a specific time
     setTimeout( function(){$('#popupLog').popup('open'); 
         }, 1000 );
});

到目前为止，所有功能都正常运行。问题是：当用户在textarea中向下滚动时，关闭popUp并重新打开它，滚动条的位置仍然相同 - 例如用户向下滚动到底部，关闭popUp并重新打开它 - popUp将位于textarea agein的底部。但是当我再次打开popUp时，我想总是把它放在textarea的顶端。为了实现这一点，我在这个popUp中实现了一个“Ok”-Button，如下所示，它关闭popUp并将scrollingTop设置为0：

$('#btn_textArea').click(function() {
// Setting position of the textArea to "0" -> But doesn't work.....
     $('#popupTextArea').scrollTop(0);
     );
});

我在这一点上有点兴奋，因为textArea的外观仍然相同。我需要刷新还是什么？我会非常感谢每一次帮助......

Answer 1

您可以使用popupbeforeposition事件来操纵textarea的scrollTop属性：

$(document).ready(function(){

    $("#exampleWindow").on("popupbeforeposition", function(evt, ui){

        $(this).find("textarea").scrollTop(0);

    });

});

这里有一个示例代码段，在textarea上滚动后关闭并打开弹出窗口的测试：

$(document).ready(function() {

  $("#exampleWindow").on("popupbeforeposition", function(evt, ui) {
    $(this).find("textarea").scrollTop(0);
  });

});

textarea {
  max-height: 100px;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">

<div data-role="popup" id="exampleWindow" data-theme="a" class="ui-corner-all" data-history="false">
  <div style="padding:0px 20px 10px 20px;" align="center">
    <h3>Example</h3>
    <textarea class="enableSelect" cols="40" rows="15" name="mytext" id="mytext" style="resize: vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec quam consectetur, molestie sapien quis, fringilla felis. Vestibulum quam turpis, eleifend vel efficitur vel, pharetra eget lorem. In hac habitasse platea dictumst. Aliquam tincidunt massa vel maximus fermentum. Integer non velit arcu. Curabitur ultricies tincidunt nisi ultrices faucibus. Ut a purus dignissim, varius nisl vitae, ultricies dolor. Integer eget nisi sed ligula imperdiet accumsan ac eget lectus. Curabitur eu lacinia nunc, ac condimentum nunc. Etiam sit amet nulla massa. Etiam porta tortor ac sapien scelerisque, ac posuere mauris lacinia. Morbi id vestibulum nisl. Praesent dolor libero, bibendum quis molestie sit amet, posuere quis mi. Etiam scelerisque porttitor sem id vestibulum. Nullam nec suscipit arcu. Aenean semper in lorem eget aliquet.</textarea>
  </div>
</div>

<a id="openExampleWindow" href="#exampleWindow" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Open popup</a>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>

滚动到jQuery-Textarea的顶部

1 个答案: