Home Web Front-end JS Tutorial Enter to tab focus switching effect code based on Jquery (Enter To Tab)_jquery

Enter to tab focus switching effect code based on Jquery (Enter To Tab)_jquery

May 16, 2016 pm 06:16 PM
tab Enter

第一种方法:

复制代码 代码如下:

$(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');
}
}

方法二(转载网络)
复制代码 代码如下:

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;
}
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Solve the problem that CentOS7's Tab key cannot complete commands Solve the problem that CentOS7's Tab key cannot complete commands Jan 17, 2024 pm 01:30 PM

Today I was doing an experiment on centOS and found that the customary tab key completion method used under Ubuntu could not be used. So I was very curious. After searching for information and testing it myself, I recorded the possible solutions as follows: 1) First, you need to Run the following command in the terminal: #yuminstallbash-completion//You can also use wildcard installation: yuminstallbash-c* or you can install some initialization package groups yum-ygroupinstallBaseCompatibilitylibrariesDebuggingToolsDial-upNetworkingsupppo

How to read carriage return in java How to read carriage return in java Mar 22, 2024 pm 04:57 PM

In Java, a carriage return is usually represented by a newline character. In Windows systems, &quot;\r\n&quot; is used to represent carriage return and line feed, while in Unix/Linux systems, &quot;\n&quot; is used. When reading text that contains carriage returns, Java treats these characters as normal characters. You can use the BufferedReader or Scanner classes to read text from an input stream until a carriage return or line feed is encountered.

How to implement tab components and multi-tab pages in Vue? How to implement tab components and multi-tab pages in Vue? Jun 25, 2023 am 09:33 AM

With the continuous updating of front-end technology, Vue, as a popular front-end framework, has become the first choice of many developers. In actual projects, it is often necessary to use tab components and multi-tab pages to switch and manage different functional modules. In this article, we will introduce how to use Vue to implement a simple tab component and multi-tab page. 1. Implement a simple tab component. Create a Tab.vue component. Create a Tab.vue component in the project to display it.

What are the three ways to implement tab in Vue? What are the three ways to implement tab in Vue? Jan 29, 2023 pm 02:49 PM

There are three ways to implement tabs in Vue: 1. Control tab content switching through "v-show"; 2. Implement tab switching through the is feature and "keep-alive" cache in Vue; 3. Implement route switching through "router-link" .

How to use carriage return to continue input in java How to use carriage return to continue input in java Mar 25, 2024 am 10:23 AM

In Java, the Scanner class can be used to implement the Enter to continue function. This class reads user input from standard input. The following example shows how to implement this functionality using the Scanner class: ```java import java.util.Scanner; public class ContinueOnEnter { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); Syste

Why can't alt+tab switch interfaces? Why can't alt+tab switch interfaces? Mar 09, 2023 pm 02:11 PM

The reason why alt+tab cannot switch the interface is that this command is disabled. The solution: 1. Turn on the computer, click the start menu, and select the run command; 2. Enter "regedit" in the blank bar to the right of the start, and click OK; 3. Enter the Registry Manager and find the "AltTabSettings" option; 4. Double-click "AltTabSettings", modify the value data in the opened option to "00000001", and click "Confirm".

RedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading Version RedMagic Gaming Tablet Pro launches as first tab with Snapdragon 8 Gen 3 Leading Version Sep 05, 2024 pm 09:30 PM

RedMagic has fully unveiled the Gaming Tablet Pro, the first tab to feature the Snapdragon 8 Gen 3 Leading Version. It’s basically the overclocked version of the standard SoC, and the RedMagic 9S Pro leads benchmarks with it. The same is true for thi

What should I do if Win10 detects a threat but cannot remove it? What should I do if Win10 detects a threat but cannot remove it? Feb 20, 2024 am 08:06 AM

Recently, some users reported that they found some threats that could not be removed during a security scan of the system. This may be due to the covert means used by the malware, making removal difficult. Solutions to this problem include updating your antivirus software, running scans in safe mode, manually removing threats, etc. It is recommended to try different methods or seek professional help to ensure the security of the system. Solution: 1. Use the "win+R" shortcut key to start running, enter "regedit" and press Enter to open it. 2. After entering the registry editor interface, change "HKEY_LOCAL_MACHINESoftwarePoliciesMicrosoftWindow

See all articles