DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Textbox控件注冊回車事件及觸發按鈕提交事件具體實現
Textbox控件注冊回車事件及觸發按鈕提交事件具體實現
編輯:關於JavaScript     
引子
在ASP.Net頁面中textbox的index為1(或n),其後的提交按鈕index為2(n+1),光標在textbox中,回車後自動焦點移動到後面的button上,會觸發button的點擊事件。

但在Lyncplus客戶端中訪問Web頁面時遇到了TextBox控件回車自動完成按鈕的提交事件失效的情況(應該是自動切換焦點)。

由於並且該服務端TextBox控件沒有提供OnKeyPress或OnKeyDown等事件,也無法針對回車事件寫後台代碼來調用Button按鈕的點擊事件。

於是上網查找相關的介紹,最終解決了以下兩個問題
(一)、實現在TextBox控件回車事件中 執行JS代碼,來控制頁面元素的值。
(二)、實現在TextBox控件回車事件中 調用服務端控件的點擊事件,來執行服務端C#代碼,實現相關的功能。
具體實現如下
一、注冊和觸發服務端TextBox控件回車事件
1.PageLoad事件代碼:
復制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()");
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()");
}

2.javascript代碼:
復制代碼 代碼如下:
<script language="javascript">
function EnterTextBox() {
if (event.keyCode == 13 && document.all["MessageTxt"].value != "") //按下了回車,並且文本框裡有值
{
$("#<%=hidKeywords.ClientID%>").val($("#<%=MessageTxt.ClientID%>").val().replace(/[^\u0000-\u00FF]/g,
function ($0) {
return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;")
}));
}
}
</script>

二、TextBox控件回車事件中調用服務端Button控件點擊事件
1.PageLoad事件代碼: 同上。
復制代碼 代碼如下:
protected void Page_Load(object sender, EventArgs e)
{
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()");
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()");
}

2.javascript代碼: 注意使用原始的dom對象獲取按鈕,使用Jquery獲取不到。
復制代碼 代碼如下:
<script language="javascript">
function EnterTextBox() {
var button = document.getElementById('<%=btnSearch.ClientID%>');//獲取服務端控件對應的頁面對象
if (event.keyCode == 13) //按下了回車
{
  button.click();
event.returnValue = false;
}
} </script>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved