16

こんにちは友人、 私はユーザーがキーを押すとhtml要素をtabindexできるようにすることである小さなタスクに取り組んでいます。

jqueryを初めて使用するので、動作するように見えるコードをいくつか作成しましたが、いくつかの問題があります。

最初の調査結果
Msgラベルの出力が「未定義」であるため、原因コードは機能しません。

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

ここに画像の説明を入力してください

コードを以下に示します。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>

どこが間違っていたのか教えてください:/

4

6 に答える 6

15

マイナーな jQuery の問題がいくつか見つかりました。ここで修正: JSFiddle

この行:

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

次のように記述できます。

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

この:

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

jQuery の方法で id 属性を呼び出していません (JavaScript 構文を使用していますが、$(this) の結果は jQuery オブジェクトです。したがって$(this).id$(this).attr('id').

フォームにはまだ送信に関する問題があり、詳しくは説明しませんでしたが、フォーカスが変更され、'#Msg' 要素が入力されるようになりました。

于 2012-05-24T17:44:24.527 に答える
9

これは、次のstackoverflowの回答に基づいて作成されたJSFiddleの例を使用してjQueryを使用せずfocusNextElementkeydown[Enter]を実行するための私の完全な作業コードです。

  1. ENTER キーを押して Web フォームを送信できないようにする方法は?
  2. タブ インデックスの次の要素にフォーカスする
<script type="text/javascript">

    function focusNextElement() {
      var focussableElements = 'a:not([disabled]), button:not([disabled]), input[type=text]:not([disabled]), [tabindex]:not([disabled]):not([tabindex="-1"])';
      if (document.activeElement && document.activeElement.form) {
        var focussable = Array.prototype.filter.call(document.activeElement.form.querySelectorAll(focussableElements),
          function(element) {
            return element.offsetWidth > 0 || element.offsetHeight > 0 || element === document.activeElement
          });
        var index = focussable.indexOf(document.activeElement);
        focussable[index + 1].focus();
      }
    }

    window.addEventListener('keydown', function(e) {
      if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName === 'INPUT' && e.target.type !== 'textarea') {
          e.preventDefault();
          focusNextElement();
          return false;
        }
      }
    }, true);

</script>
于 2016-11-18T21:38:45.180 に答える
4

新しい投稿を作成したり、便利なソリューションでスパムを作成したりしたくありませんでした。

他の情報源 ( Brian Glaz コードの nice-one)から情報を収集し、 Enterキー を使用して、 Focus Next Element In Tab-indexのクロスブラウザー バージョンを作成しました。

タブ インデックスは連続していませんが、間にスペースを含めることもできます (1、2、9、11、30 など)。

var tabindex = 1; //start tabindex || 150 is last tabindex
    $(document).keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if(keycode == '13') { //onEnter
            tabindex++;
            //while element exist or it's readonly and tabindex not reached max do
            while(($("[TabIndex='"+tabindex+"']").length == 0 || $("[TabIndex='"+tabindex+"']:not([readonly])").length == 0) && tabindex != 150 ){
                tabindex++;
            }
            if(tabindex == 150){ tabindex = 1 } //reseting tabindex if finished
            $("[TabIndex='"+tabindex+"']").focus()
            return false;
        }
    });
    
    $("input").click(function() { //if changing field manualy with click - reset tabindex 
        var input = $(this);
        tabindex = input.attr("tabindex");
    })

誰かがそれを役に立つと思うことを願っています。自由に編集/コメントしてください。

于 2012-06-26T11:04:14.170 に答える
1

まさにこの問題の解決策を探して、次の有効なタブインデックスを見つける小さな jquery 関数を生成しました。メンテナンスが少し簡単で、while ループよりも少し速いとします。

function getNextTabindex(currentTabIndex) {
  return $("[tabindex]").index($("[tabindex=" + currentTabIndex + "]")) + 1;
}

これが必要な人に役立つことを願っています。これはテスト済みで動作します。

これを簡単に説明すると、現在の tabindex の要素を探し、すべての tabindex 要素のリストでこの要素を見つけ、そのインデックスを取得して、インデックスを増やします。

次に、この関数を使用して、次の tabindex 要素をそのように選択できます。

$('[tabindex=' + getNextTabindex($(":focus").attr("tabindex")) + ']').focus();

呼び出しをテストしませんでしたが、動作すると思います。

于 2013-09-25T15:59:10.653 に答える