web-dev-qa-db-ja.com

JQueryによるEnterキーを押すと、HTML要素の次のtabindexにフォーカスします

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

Jqueryが初めてなので、動作するように思えるコードをいくつか書きましたが、いくつかの問題があります。

最初の発見
犯人コード、それは機能しません、メッセージラベルの出力が「未定義」であるため

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

enter image description here

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

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

javascriptjqueryasp.nethtmltabindex
13
Owais Qureshi

いくつかの小さな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」要素に記入します。

13
vansimke

以下は、focusNextElementon keydown [Enter] withoutへの完全な作業コードです。 jQuerywith JSFiddle example 次のstackoverflow回答に基づいて作成：

  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>
6
eapo

新しい投稿をしたくなかったし、私が役に立つと思ったソリューションでスパムをしたくなかった。

他のソース（ Brian Glaz code Nice-one）から情報を収集し、クロスブラウザーバージョンのFocus Next Element In Tab-indexEnterキーを使用します。

Tab-indexesは次々ではなくですが、 （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");
    })

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

4
karlisup
var tab = $(this).attr("tabindex");
tab++;
$("[tabindex='"+tab+"']").focus();
2
Ana El Bembo

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

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

これが必要な人に役立つことを願っています。これはテストされ、機能します。

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

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

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

私は呼び出しをテストしませんでしたが、動作すると仮定します。

1
Jörg Henke
var tabindex= $(this).attr("tabindex");
tabindex++;
$("[tabindex='"+tabindex+"']").focus();

テーブル内の編集可能なセルのサンプル

    $(document).on('dblclick', 'td', function () {
        console.log('clicked');
        this.contentEditable = 'true';
    });
 $(document).on('keydown', 'td', function (event) {
        if (event.keyCode === 9 || event.keyCode === 13) {
            this.contentEditable = 'false';
            //  $(this).next().focus().dblclick().focus();
            var tabindex = $(this).attr('tabindex');
            tabindex++;
            var next = $('[tabindex=' + tabindex + ']').focus().dblclick();
            if (next.is('td') == false)
                return true;
            var sel, range;
            if (window.getSelection && document.createRange) {
                range = document.createRange();
                range.selectNodeContents(next[0]);
                range.collapse(true);
                sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            } else if (document.body.createTextRange) {
                range = document.body.createTextRange();
                range.moveToElementText(next[0]);
                range.collapse(true);
                range.select();
            }

            return false;
        }
    });

動的テーブルの編集可能なセル

0
Hossein Hajizadeh