繁体   English   中英

如何向下滚动到多行TextBox的底线,Javascript的scrollIntoView无法正常工作

[英]How can I scroll down to a multiline TextBox's bottom line, Javascript's scrollIntoView is not working for this

我正在尝试创建一个基本的视频和文本聊天网站。在房间页面中,我将视频作为flash和一个文本框(多行)显示发送到房间的所有消息和一个文本框,供用户通过单击键入和发送旁边的按钮

<tr>
    <td>
         <asp:UpdatePanel ID="UpdtPnlMesajlar" runat="server" EnableViewState="true">
               <ContentTemplate>
                      <table>
                             <tr>
                                 <td>
                                     <asp:TextBox ID="TxtBxOdaMesajlari" 
                                      runat="server" ReadOnly="true"
                                      TextMode="MultiLine"
                                      Width="475" Height="100"  >
                                     </asp:TextBox>
                                 </td>
                             </tr>
                             <tr>
                                 <td>
                                     <asp:TextBox ID="TxtBxMesaj" runat="server" 
                                      Width="412"></asp:TextBox>
                                     <asp:Button ID="BttnGonder" runat="server"
                                      Text="Gönder" Width="55"
                                      OnClick="BttnGonder_click"/>
                                 </td>
                             </tr>
                      </table>
               </ContentTemplate>
            </asp:UpdatePanel>
       </td>
   </tr>

上面是我的代码,所有这些控件都在UpdatePanel所以当用户点击BttnGonder ,没有闪烁发生。

当用户按下按钮时他输入的方式concataned到TxtBxOdaMesajlari在叫下面的方法BttnGonder_click

protected void BttnGonder_click(object sender, EventArgs e)
        {
            string uyeId = Session["UyeId"].ToString();
            string mesaj = uyeId + " : " + TxtBxMesaj.Text;
            TxtBxOdaMesajlari.Text = TxtBxOdaMesajlari.Text + Environment.NewLine + mesaj;
            ScriptManager.RegisterStartupScript(this, this.GetType(), "txtbxmesajlarslide", "buttonClicked();", true);

        }  

好了很多消息滚动条出现TxtBxOdaMesajlari可以看到TxtBxOdaMesajlari ,但是新消息无法看到,因为TxtBxOdaMesajlari没有自动滑动/向下滚动。我搜索了这个并找到了这个例子多用户聊天室使用ASP.NET 2.0和AJAX它使用Javascript的scrollIntoView()所以我决定使用它,但页面变得闪烁,滚动根本不起作用。也许我使用错误的控件或错误的方法来做。 如果这很重要,我正在使用ASP.NET 4.0。

在aspx文件上

<script language="javascript" type="text/javascript">
    function buttonClicked() {
                $get("TxtBxOdaMesajlari").scrollIntoView("true");
            }
</script>

我正在使用ScriptManager.RegisterStartupScript因为控件位于UpdatePanel因为它被建议并在用户接受的答案中 正常工作JavaScript函数 3742 无法正常工作

scrollIntoView用于将文本框本身滚动到视图中,而不是其内容。

要滚动到文本框的末尾,您可以使用:

function buttonClicked() {
    var textBox = $get("TxtBxOdaMesajlari");
    textBox.scrollTop = textBox.scrollHeight;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM