基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab )
更新時(shí)間:2010年11月14日 20:28:37 作者:
基于Jquery的回車成tab焦點(diǎn)切換效果代碼(Enter To Tab ),需要的朋友可以參考下。
第一種方法:
$(document).ready(function () {
$(':input:text:first').focus();
$(':input:enabled').addClass('enterIndex');
// get only input tags with class data-entry
textboxes = $('.enterIndex');
// now we check to see which browser is being used
if ($.browser.mozilla) {
$(textboxes).bind('keypress', CheckForEnter);
} else {
$(textboxes).bind('keydown', CheckForEnter);
}
});
function CheckForEnter(event) {
if (event.keyCode == 13 && $(this).attr('type') != 'button' && $(this).attr('type') != 'submit' && $(this).attr('type') != 'textarea' && $(this).attr('type') != 'reset') {
var i = $('.enterIndex').index($(this));
var n = $('.enterIndex').length;
if (i < n - 1) {
if ($(this).attr('type') != 'radio')
{
NextDOM($('.enterIndex'),i);
}
else {
var last_radio = $('.enterIndex').index($('.enterIndex[type=radio][name=' + $(this).attr('name') + ']:last'));
NextDOM($('.enterIndex'),last_radio);
}
}
return false;
}
}
function NextDOM(myjQueryObjects,counter) {
if (myjQueryObjects.eq(counter+1)[0].disabled) {
NextDOM(myjQueryObjects, counter + 1);
}
else {
myjQueryObjects.eq(counter + 1).trigger('focus');
}
}
方法二(轉(zhuǎn)載網(wǎng)絡(luò))
document.onkeydown = function(evt) {
var isie = (document.all) ? true : false;
var key;
var srcobj;
alert(isie);
if (isie) {
key = event.keyCode;
srcobj = event.srcElement;
}
else {
alert(evt);
key = evt.which;
srcobj = evt.target;
}
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') {
if (isie) {
event.keyCode = 9;
}
else {
var el = getNextElement(evt.target);
if (el.type != 'hidden')
el.focus();
else
while (el.type == 'hidden')
el = getNextElement(el);
el.focus();
return false;
}
}
}
document.onkeyup = function(evt) {
var isie = (document.all) ? true : false;
var key;
var srcobj;
alert(isie);
if (isie) {
key = event.keyCode;
srcobj = event.srcElement;
}
else {
alert(evt);
key = evt.which;
srcobj = evt.target;
}
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') {
if (isie) {
event.keyCode = 9;
}
else {
var el = getNextElement(evt.target);
if (el.type != 'hidden')
el.focus();
else
while (el.type == 'hidden')
el = getNextElement(el);
el.focus();
return false;
}
}
}
function getNextElement(field) {
var form = field.form;
for (var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e])
break;
}
return form.elements[++e % form.elements.length];
}
function document.onkeydown() {
var e = event.srcElement;
if (event.keyCode == 13 && e.tagName == "INPUT" && e.type == "text")
event.keyCode = 9;
}
復(fù)制代碼 代碼如下:
$(document).ready(function () {
$(':input:text:first').focus();
$(':input:enabled').addClass('enterIndex');
// get only input tags with class data-entry
textboxes = $('.enterIndex');
// now we check to see which browser is being used
if ($.browser.mozilla) {
$(textboxes).bind('keypress', CheckForEnter);
} else {
$(textboxes).bind('keydown', CheckForEnter);
}
});
function CheckForEnter(event) {
if (event.keyCode == 13 && $(this).attr('type') != 'button' && $(this).attr('type') != 'submit' && $(this).attr('type') != 'textarea' && $(this).attr('type') != 'reset') {
var i = $('.enterIndex').index($(this));
var n = $('.enterIndex').length;
if (i < n - 1) {
if ($(this).attr('type') != 'radio')
{
NextDOM($('.enterIndex'),i);
}
else {
var last_radio = $('.enterIndex').index($('.enterIndex[type=radio][name=' + $(this).attr('name') + ']:last'));
NextDOM($('.enterIndex'),last_radio);
}
}
return false;
}
}
function NextDOM(myjQueryObjects,counter) {
if (myjQueryObjects.eq(counter+1)[0].disabled) {
NextDOM(myjQueryObjects, counter + 1);
}
else {
myjQueryObjects.eq(counter + 1).trigger('focus');
}
}
方法二(轉(zhuǎn)載網(wǎng)絡(luò))
復(fù)制代碼 代碼如下:
document.onkeydown = function(evt) {
var isie = (document.all) ? true : false;
var key;
var srcobj;
alert(isie);
if (isie) {
key = event.keyCode;
srcobj = event.srcElement;
}
else {
alert(evt);
key = evt.which;
srcobj = evt.target;
}
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') {
if (isie) {
event.keyCode = 9;
}
else {
var el = getNextElement(evt.target);
if (el.type != 'hidden')
el.focus();
else
while (el.type == 'hidden')
el = getNextElement(el);
el.focus();
return false;
}
}
}
document.onkeyup = function(evt) {
var isie = (document.all) ? true : false;
var key;
var srcobj;
alert(isie);
if (isie) {
key = event.keyCode;
srcobj = event.srcElement;
}
else {
alert(evt);
key = evt.which;
srcobj = evt.target;
}
if (key == 13 && srcobj.type != 'button' && srcobj.type != 'submit' && srcobj.type != 'reset' && srcobj.type != 'textarea' && srcobj.type != '') {
if (isie) {
event.keyCode = 9;
}
else {
var el = getNextElement(evt.target);
if (el.type != 'hidden')
el.focus();
else
while (el.type == 'hidden')
el = getNextElement(el);
el.focus();
return false;
}
}
}
function getNextElement(field) {
var form = field.form;
for (var e = 0; e < form.elements.length; e++) {
if (field == form.elements[e])
break;
}
return form.elements[++e % form.elements.length];
}
function document.onkeydown() {
var e = event.srcElement;
if (event.keyCode == 13 && e.tagName == "INPUT" && e.type == "text")
event.keyCode = 9;
}
您可能感興趣的文章:
- 按Enter鍵觸發(fā)事件的jquery方法實(shí)現(xiàn)代碼
- jquery實(shí)現(xiàn)按Enter鍵觸發(fā)事件示例
- 基于jquery的button默認(rèn)enter事件(回車事件)。
- jquery 按鍵盤上的enter事件
- jQuery事件之鍵盤事件(ctrl+Enter回車鍵提交表單等)
- 修改jQuery.Autocomplete插件 支持中文輸入法 避免TAB、ENTER鍵失效、導(dǎo)致表單提交
- 基于Jquery的實(shí)現(xiàn)回車鍵Enter切換焦點(diǎn)
- Jquery利用mouseenter和mouseleave實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出層且可以點(diǎn)擊
- jQuery響應(yīng)enter鍵的實(shí)現(xiàn)思路
- jquery實(shí)現(xiàn)tab鍵進(jìn)行選擇后enter鍵觸發(fā)click行為
相關(guān)文章
jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果(附demo源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)可以控制圖片旋轉(zhuǎn)角度效果,可實(shí)現(xiàn)通過下方的滑塊拖動(dòng)控制圖片旋轉(zhuǎn)的功能,涉及jQuery操作頁面元素樣式動(dòng)態(tài)變換的技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01jQuery實(shí)現(xiàn)的簡單拖動(dòng)層示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單拖動(dòng)層,可實(shí)現(xiàn)響應(yīng)鼠標(biāo)拖動(dòng)div層及動(dòng)態(tài)顯示坐標(biāo)值的功能,涉及jQuery鼠標(biāo)響應(yīng)及頁面元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-02-02jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法(兩種方法)
這篇文章主要介紹了jQuery Dialog 打開時(shí)自動(dòng)聚焦的解決方法,及jquery dialog打開時(shí),自動(dòng)聚焦在第一個(gè)控件上的方法,對(duì)jquery dialog相關(guān)知識(shí)感興趣的朋友通過本文一起學(xué)習(xí)吧2016-11-11基于JQuery實(shí)現(xiàn)滾動(dòng)到頁面底端時(shí)自動(dòng)加載更多信息
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)滾動(dòng)到頁面底端時(shí)自動(dòng)加載更多信息,類似微博,新浪新聞的評(píng)論等,都采用了這方法,需要的朋友可以參考下2014-01-01jQuery Ajax請(qǐng)求狀態(tài)管理器打包
現(xiàn)在的網(wǎng)站,在一個(gè)網(wǎng)頁中有異步請(qǐng)求甚至許多個(gè)異步請(qǐng)求已經(jīng)不足為奇。Ajax已經(jīng)成為了現(xiàn)在網(wǎng)站必須的基本功能,使網(wǎng)頁應(yīng)用更接近于桌面應(yīng)用2012-05-05基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
我們做搜索框的時(shí)候,經(jīng)常需要這樣一個(gè)效果:搜索框默認(rèn)顯示一段提示文本,比如“輸入關(guān)鍵詞”,鼠標(biāo)點(diǎn)擊后,清空這段文本。鼠標(biāo)再次點(diǎn)擊別的地方,又要恢復(fù)這段文本2012-02-02jquery獲得option的值和對(duì)option進(jìn)行操作
本文為大家介紹下jquery獲得option的值和對(duì)option的操作,下面有不錯(cuò)的示例分析及示例代碼,感興趣的朋友可以了解下2013-12-12