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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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

RedMagic reveals more specs of its new gaming tablet RedMagic reveals more specs of its new gaming tablet Sep 01, 2024 am 06:34 AM

The second RedMagic gaming tablet will be fully unveiled on September 5. A recent benchmark run on AnTuTu revealed that it will feature the Snapdragon 8 Gen 3 Leading Version, making it as capable as the company’s latest Android smartphone, the 9S Pr

See all articles