0

私はアマチュア コーダーであり、javaScript の初心者 (またはそれ以下) であり、複数の (多くの)<textarea>入力を使用してオンライン フォームを作成しようとしています。

引数のために、それが 3 x 3 型の向きであると仮定しましょう:

他の機能とパフォーマンスの理由から、<textarea>and notを使用する必要があります<inputs>。

テキストエリア入力のあるシンプルなサンプル HTML フォーム

人が [TAB] を押すと、予想どおり、心配することなくタブ インデックスが適用されます ( A1 --> B1 )。

人が [RETURN] を押した場合、それは であるため<textarea>、\n 区切り文字が追加され、行が分割され、まだフォーカスされている 内に残ります<textarea>。

私が実現したいのは、人が [RETURN] を押すと、3 つのタブ インデックスが「スキップ」され (それが正しい単語である場合)、フォーカスが<textarea>直前の focused のすぐ下に移動すること<textarea>です。

例: 私は A1 にいます。私は何かを書いたり入力したりします。[RETURN] を押します。私は直接A2に連れて行かれます。

[[アップデート]]

HTML テキスト エリア コー​​ドの例:

<textarea data-id="0" class="inputArea colorInput" id="dataInput_0" name="colorInput_row_1" onFocus="classFocused();" onBlur="classBlured();" onKeyUp="splitInput();"></textarea>
4

1 に答える 1

0

jQuery JavaScript フレームワークを使用し、キー プレス イベント リスナーをテキスト領域にアタッチし、押されたキーが [ENTER] (キー コード 13) の場合は、目的のフィールドにフォーカスを移動します (できれば、テキスト領域を簡単に識別できるように ID を設定します)。 ）。

HTML

<textarea class="ta" data-id="1"></textarea>
<textarea class="ta" data-id="2"></textarea>
<textarea class="ta" data-id="3"></textarea>

<textarea class="ta" data-id="4"></textarea>
<textarea class="ta" data-id="5"></textarea>
<textarea class="ta" data-id="6"></textarea>

<textarea class="ta" data-id="7"></textarea>
<textarea class="ta" data-id="8"></textarea>
<textarea class="ta" data-id="9"></textarea>

Javascript

$(document).ready(function(){

    //attach the event listener on your text areas
    $('.ta').keypress(function(e){
        if (e.keyCode == 13) //check if [enter] was pressed
        {
            var currentID = $(this).attr('data-id'); //get the ID of the text area where this happened
            if (currentID < 7) $('.ta[data-id="' + (currentID + 3) + '"]').focus(); //if there are other text areas down the line, shift the focus
        }
    });

})
于 2013-04-20T06:27:28.173 に答える