侧重于JQuery的HTML元素旁边的tabIndex的OnEnter键preSS [英] focus on next tabindex of HTML element onEnter keypress by JQuery

问题描述

喜的朋友，
我工作在一个小任务，这是为了使用户的TabIndex html元素后回车键preSS。

Hi Friends, I'm working on a small task which is to enable the user to tabindex the html element upon enter keypress.

随着即时通讯新jQuery的，我已经写了一些code这在我看来，这将工作，但也有它的一些问题。

As im new to jquery , I have written some code which seems to me that It will work ,but there are some problems in it.

初步调查结果

罪魁祸首code，它不工作，如消息lablel的输出中是未定义

Initial findings
The culprit code ,it doesnt work ,as the ouput in the Msg lablel is "Undefined"

$('*').attr('tabindex').id

在code下面给出我已经甚至创造了一个的jsfiddle 。

The code is given below and I have even created a JSFiddle.

JQuery的

 $(document).ready(function (eOuter) {
    $('input').bind('keypress', function (eInner) {
        if (eInner.keyCode == 13) //if its a enter key
        {
            var tabindex = $(this).attr('tabindex');
            tabindex++; //increment tabindex
            //after increment of tabindex ,make the next element focus
            $('*').attr('tabindex', tabindex).focus();

                       **//Msg Label**
            //Just to print some msgs to see everything is working
            $('#Msg').text( this.id + " tabindex: " + tabindex 
               + " next element: " + $('*').attr('tabindex').id);

            return false; // to cancel out Onenter page postback in asp.net
        }
    });
}
);

HTML

<div>
    Employee Info<br />
    Name<br />
    <input name="TxtbxName" type="text" value="ok" id="TxtbxName" tabindex="1" />
    <br />
    Age<br />
    <input name="TxtbxAge" type="text" id="TxtbxAge" tabindex="2" />
    <br />
    Gender<br />
    <select name="DdlGender" id="DdlGender" tabindex="3">
      <option selected="selected" value="Male">Male</option>
      <option value="Female">Female</option>
    </select>
    <br />
    <div>
        Previous Employment<br />
        <select name="DdlCompany" id="DdlCompany" tabindex="4">
   <option selected="selected" value="0">Folio3</option>
   <option value="1">Null Soft</option>
   <option value="2">Object Soft</option>
   <option value="3">Excepption Soft</option>
    </select>
        &nbsp;&nbsp;or Enter Code&nbsp;&nbsp;
        <input name="TxtbxCompanyCode" type="text" id="TxtbxCompanyCode" tabindex="5" />
        <br />
        Address<br />
        <input name="TxtbxAddress" type="text" id="TxtbxAddress" tabindex="6" />
        <br />
       <input type="submit" name="BtnSubmit" value="Submit" id="BtnSubmit" tabindex="7"/>
        <br />
        <label id="Msg">Message here</label>
    </div>
</div>

让我知道我在哪里出了错：/

推荐答案

我发现一对夫妇的未成年人jQuery的问题。这里修正：的jsfiddle

I found a couple of minor jQuery issues. Fixed here: JSFiddle.

这行：

$('*').attr('tabindex', tabindex).focus();

可以这样写：

$('[tabindex=' + tabindex + ']').focus();

和这样的：

$('#Msg').text($(this).id + " tabindex: " + tabindex 
           + " next element: " + $('*').attr('tabindex').id);

不调用id属性jQuery的方式（使用的是JavaScript语法，而是$的结果（这）是一个jQuery对象。所以... $（本）.ID 变成 $（本）.attr（'身份证'）。

形式仍然有一个问题提出，我没有挖得遥远，但它改变了焦点，现在填写的#Msg'元素。

The form still has a submission problem, that I didn't dig too far into, but it changes focus and fills out the '#Msg' element now.

这篇关于侧重于JQuery的HTML元素旁边的tabIndex的OnEnter键preSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！