ホームページ ウェブフロントエンド jsチュートリアル Jquery (Enter To Tab)_jquery に基づいた Enter to Tab フォーカス切り替えエフェクト コード

Jquery (Enter To Tab)_jquery に基づいた Enter to Tab フォーカス切り替えエフェクト コード

May 16, 2016 pm 06:16 PM
tab 入力

最初の方法:

复制代代码如下:

$(document).ready( function () {
$(':input:text:first').focus();
$(':input:enabled').addClass('enterIndex');
// 取得のみクラス data-entry の input タグ
textboxes = $('.enterIndex');
// 次に、どのブラウザが使用されているかを確認します
if ($.browser.mozilla) {
$(textboxes).bind('keypress', CheckForEnter);
$(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 if ($(this).attr('type') != 'radio')
{
NextDOM($('.enterIndex' )、私);
}
else {
var last_radio = $('.enterIndex').index($('.enterIndex[type=radio][name=' $(this).attr('name') ']:最後'));
NextDOM($('.enterIndex'),last_radio);
}
}
false を返します。
}
}
関数 NextDOM(myjQueryObjects,counter) {
if (myjQueryObjects.eq(counter 1)[0].disabled) {
NextDOM(myjQueryObjects, counter 1);
}
else {
myjQueryObjects.eq(counter 1).trigger('focus');
}
}


方法二(转下网络)


复制代 代以下のように: document.onkeydown = function(evt) {
var isie = (document.all) ? true : false;
var キー;
var srcobj;
アラート(isie);
if (isie) {
key =event.keyCode;
srcobj = イベント.srcElement;
}
else {
alert(evt);
key = evt.that;
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();
false を返します。
}
}
}
document.onkeyup = function(evt) {
var isie = (document.all) ? true : false;
var キー;
var srcobj;
アラート(isie);
if (isie) {
key =event.keyCode;
srcobj = イベント.srcElement;
}
else {
alert(evt);
key = evt.that;
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();
false を返します。
}
}
}
function getNextElement(field) {
var form = field.form;
for (var e = 0; 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;
}

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

CentOS7のTabキーでコマンドが完了できない問題を解決 CentOS7のTabキーでコマンドが完了できない問題を解決 Jan 17, 2024 pm 01:30 PM

CentOS7のTabキーでコマンドが完了できない問題を解決

Vue でタブ コンポーネントとマルチタブ ページを実装するにはどうすればよいですか? Vue でタブ コンポーネントとマルチタブ ページを実装するにはどうすればよいですか? Jun 25, 2023 am 09:33 AM

Vue でタブ コンポーネントとマルチタブ ページを実装するにはどうすればよいですか?

Javaでキャリッジリターンを読み取る方法 Javaでキャリッジリターンを読み取る方法 Mar 22, 2024 pm 04:57 PM

Javaでキャリッジリターンを読み取る方法

Vue でタブを実装する 3 つの方法は何ですか? Vue でタブを実装する 3 つの方法は何ですか? Jan 29, 2023 pm 02:49 PM

Vue でタブを実装する 3 つの方法は何ですか?

Javaでキャリッジリターンを使用して入力を続ける方法 Javaでキャリッジリターンを使用して入力を続ける方法 Mar 25, 2024 am 10:23 AM

Javaでキャリッジリターンを使用して入力を続ける方法

Alt+Tab でインターフェースを切り替えられないのはなぜですか? Alt+Tab でインターフェースを切り替えられないのはなぜですか? Mar 09, 2023 pm 02:11 PM

Alt+Tab でインターフェースを切り替えられないのはなぜですか?

Win10 が脅威を検出したが削除できない場合はどうすればよいですか? Win10 が脅威を検出したが削除できない場合はどうすればよいですか? Feb 20, 2024 am 08:06 AM

Win10 が脅威を検出したが削除できない場合はどうすればよいですか?

RedMagic が新しいゲーム タブレットの詳細スペックを明らかに RedMagic が新しいゲーム タブレットの詳細スペックを明らかに Sep 01, 2024 am 06:34 AM

RedMagic が新しいゲーム タブレットの詳細スペックを明らかに

See all articles