如何向下滚动到多行 TextBox 的底行,Javascript 的 rollIntoView 对此不起作用
我正在尝试创建一个基本的视频和文本聊天网站。在房间页面中,我有 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
时不会发生闪烁。
当用户按下按钮时,他输入的内容将连接到下面名为 BttnGonder_click
的方法中的 TxtBxOdaMesajlari
。
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
不会自动向下滑动/滚动。我对此进行了搜索,发现此示例 多用户使用 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
中,正如建议的那样,并且在 用户已接受答案:3742 of JavaScript 函数不工作。
I am trying to create a basic video and text chat web site.In the room page I have the video as flash and a textbox(multiline) which shows all the messages sent to the room and one textbox for users to type and send by clicking the button beside it
<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>
Above is my code, all those controls are in an UpdatePanel
so when user clicks BttnGonder
that no flickers happens.
When user presses the button what he typed is concataned to TxtBxOdaMesajlari
in the below method called 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);
}
Well after a number of messages scrollbars appear TxtBxOdaMesajlari
can be seen , however the new messages cannot be seen because TxtBxOdaMesajlari
does not slide/scroll down automatically.I searched about this and found this example Multi User Chat Room Using ASP.NET 2.0 and AJAX it uses Javascript's scrollIntoView()
so I decided to use it but the page gets flickered and scrolling does not work at all.Maybe I am using the wrong control or the wrong way to do is.
I am using ASP.NET 4.0 if that matters a lot.
On aspx file
<script language="javascript" type="text/javascript">
function buttonClicked() {
$get("TxtBxOdaMesajlari").scrollIntoView("true");
}
</script>
I am using ScriptManager.RegisterStartupScript
because the controls are in an UpdatePanel
as it was suggested and worked fine at Accepted answer by user:3742 of JavaScript function is not working.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
scrollIntoView 用于将文本框本身滚动到视图中,而不是其内容。
为了滚动到文本框的末尾,您可以使用:
scrollIntoView is used to scroll the textbox itself into view, not its contents.
In order to scroll to the end of the textbox, you can use: