jquery模擬按下回車實現(xiàn)代碼
更新時間:2011年09月20日 22:06:00 作者:
今天要實現(xiàn)一個回車事件,一開始用了 js 的方法,怎么都不行,原來JQuery有點不同于JS的,而且比起JS簡單多了
簡單地記下jquery實現(xiàn)回車事件,代碼如下:
全局:
$(function(){
document.onkeydown = function(e){
var ev = document.all ? window.event : e;
if(ev.keyCode==13) {
$('#FormId).submit();//處理事件
}
}
});
某個控件:
$('#id').keydown(function(e){
if(e.keyCode==13){
$('#FormId).submit(); //處理事件
}
});
if (window.event.keyCode==13) window.event.keyCode=0 //這樣就取消回車鍵了
如果想模擬Tab鍵,只要寫成 if (window.event.keyCode==13) window.event.keyCode=9 就行了,它會跳到另一個元素上。
眾所周知easyui 的Pagination中要想跳轉(zhuǎn)到某一頁,只需要輸入頁碼按ENTER就能達到效果。前段時間的項目 客戶提出要求說想要輸入頁碼 按一個GO的按鈕做跳轉(zhuǎn)。好吧,客戶是上帝,他們怎么說我們這些程序猿只能盡自己所能來達到效果。如圖:
<input class="pagination-num" type="text" value="1" size="2">
而后查看了JQUERY API 的 Event Object發(fā)現(xiàn) jquery有個trigger方法能夠觸發(fā)模擬的按鍵事件。直接上代碼
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#test").datagrid({
url: "/Test/Test1Data",
type: "post",
datatype: "json",
width: 465,
height: 280,
loadMsg: "數(shù)據(jù)加載中,請稍后...",
fitCloumns: true,
nowrap: true,
rownumbers: false,
pagination: true,
singleSelect: true,
showFooter: true,
columns: [[
{ field: 'testName', title: '測試名', width:230, editor: 'text'},
{field:'testValue',title:'測試值',width:230,align: 'center' }
]]
});
$("#test").datagrid('getPager').pagination({
showPageList: false,
showRefresh: false,
beforePageText: "第",
afterPageText: "頁 <a href='javascript:void(0)' onclick='GoEnterPage()'><img src='/upload/201109/20110920220555970.gif'></a>,共{pages}頁",
displayMsg: '當前{from}到{to}條,總共{total}條'
});
}); //上面代碼參數(shù)可以參看easyui的文檔
function GoEnterPage() {
var e = jQuery.Event("keydown");//模擬一個鍵盤事件
e.keyCode = 13;//keyCode=13是回車
$("input.pagination-num").trigger(e);//模擬頁碼框按下回車
}
</script>
easyui官網(wǎng):http://www.jeasyui.com/index.php
jquery:http://jquery.com/
這里有個jquery的中文手冊,說明很全:http://jquery.org.cn/manual/
全局:
復制代碼 代碼如下:
$(function(){
document.onkeydown = function(e){
var ev = document.all ? window.event : e;
if(ev.keyCode==13) {
$('#FormId).submit();//處理事件
}
}
});
某個控件:
復制代碼 代碼如下:
$('#id').keydown(function(e){
if(e.keyCode==13){
$('#FormId).submit(); //處理事件
}
});
if (window.event.keyCode==13) window.event.keyCode=0 //這樣就取消回車鍵了
如果想模擬Tab鍵,只要寫成 if (window.event.keyCode==13) window.event.keyCode=9 就行了,它會跳到另一個元素上。
眾所周知easyui 的Pagination中要想跳轉(zhuǎn)到某一頁,只需要輸入頁碼按ENTER就能達到效果。前段時間的項目 客戶提出要求說想要輸入頁碼 按一個GO的按鈕做跳轉(zhuǎn)。好吧,客戶是上帝,他們怎么說我們這些程序猿只能盡自己所能來達到效果。如圖:

即:按下GO做 輸入3按回車一樣的事情
而這個問題可以簡化為 點擊一個a標簽 模擬Pagination頁碼輸入框按下回車 但是這個事件是寫在jquery.easyui.min.js中,我們沒有辦法直接調(diào)用;通過chrome查詢到頁碼輸入框是
復制代碼 代碼如下:
<input class="pagination-num" type="text" value="1" size="2">
而后查看了JQUERY API 的 Event Object發(fā)現(xiàn) jquery有個trigger方法能夠觸發(fā)模擬的按鍵事件。直接上代碼
復制代碼 代碼如下:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#test").datagrid({
url: "/Test/Test1Data",
type: "post",
datatype: "json",
width: 465,
height: 280,
loadMsg: "數(shù)據(jù)加載中,請稍后...",
fitCloumns: true,
nowrap: true,
rownumbers: false,
pagination: true,
singleSelect: true,
showFooter: true,
columns: [[
{ field: 'testName', title: '測試名', width:230, editor: 'text'},
{field:'testValue',title:'測試值',width:230,align: 'center' }
]]
});
$("#test").datagrid('getPager').pagination({
showPageList: false,
showRefresh: false,
beforePageText: "第",
afterPageText: "頁 <a href='javascript:void(0)' onclick='GoEnterPage()'><img src='/upload/201109/20110920220555970.gif'></a>,共{pages}頁",
displayMsg: '當前{from}到{to}條,總共{total}條'
});
}); //上面代碼參數(shù)可以參看easyui的文檔
function GoEnterPage() {
var e = jQuery.Event("keydown");//模擬一個鍵盤事件
e.keyCode = 13;//keyCode=13是回車
$("input.pagination-num").trigger(e);//模擬頁碼框按下回車
}
</script>
easyui官網(wǎng):http://www.jeasyui.com/index.php
jquery:http://jquery.com/
這里有個jquery的中文手冊,說明很全:http://jquery.org.cn/manual/
相關(guān)文章
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用,而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果示例
這篇文章主要介紹了jQuery實現(xiàn)數(shù)字自動增加或者減少的動畫效果,涉及jQuery結(jié)合時間函數(shù)動態(tài)設(shè)置元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的代碼
jquery實現(xiàn)文本框鼠標右擊無效以及不能輸入的實現(xiàn)方法,需要的朋友可以參考下。2010-11-11

