0

基本的に、一連の 5 行のテキスト ボックス (各行には 3 列が含まれます) と単一のテキスト エリアがあります。入力/テキスト ボックスの次の行。

以下のコードは、row1 col3 から textarea_desc に移動し、textarea_desc をタブ移動すると、フォーカスが row2 col1 に移動しますが、row2 col1 にカーソルが表示されません... css を追加した場合、それは表示されます行2 col1にカーソルがありますが、カーソルがないため、テキストを入力できません。カーソルを表示するには、row2 col1をクリックする必要があります。理由を教えてください。

 $('input[type="text"],textarea').on('focusout',  function() {
        var box_class=$(this).attr("class");
        var row_id=$(this).parents('ul').attr('id');    


        if (box_class.indexOf("col3")>=0) {
            $("#textarea_desc").focus();
            $("#prev_row").val(row_id);
        }
        if (box_class.indexOf("textarea_desc")>=0) {
            var prev_row=$("#prev_row").val();

            var new_row=$("#prev_row").val().match(/\d+/);
            new_row="#row"+(parseInt(new_row)+1)+"-col1";


            $(new_row).focus();


        }

    });

html ....

 <ul id="row1" class="row">
                    <li class="col1" >1.</li>
                    <li class="col2"><input type="text" size="26" class="row1-col1" id="row1-col1" /></li>
                    <li class="col3"><textarea cols="28" rows="1"  class="row1-col2  textareainp" id="row1-col2" ></textarea></li>
                    <li class="col4"><input type="text" size="10" class="row1-col3 " id="row1-col3" /></li>
                </ul><ul id="row2" class="row">
                    <li class="col1" >2.</li>
                    <li class="col2"><input type="text" size="26" class="row2-col1" id="row2-col1" /></li>
                    <li class="col3"><textarea cols="28" rows="1"  class="row2-col2  textareainp" id="row2-col2" ></textarea></li>
                    <li class="col4"><input type="text" size="10" class="row2-col3 " id="row2-col3" /></li>
                </ul>
<textarea cols="40" rows="7"  class="textarea_desc" id="textarea_desc" ></textarea>
<input type="hidden" id="prev_row" class="prev_row" value="" />
4

1 に答える 1

0

これは、focusoutが原因で が発生してTABおり、TABイベントによってフォーカスが自動的に次の要素に移動するためです。TABキーをキャッチしてから、次のようなものを使用する必要があります。

$("*:focus")

これにより、現在フォーカスされている要素が得られます。これを関数で使用します。

また、これを呼び出す必要があります：

event.preventDefault()

作業コード:

$(document).on("keydown", function(event) {
    switch (event.keyCode) {
        case 9: // TAB
            event.preventDefault(); // Stop from changing focus

            $this = $("*:focus");

            var box_class=$this.attr("class");
            var row_id=$this.parents('ul').attr('id');    

            if (box_class.indexOf("col3")>=0) {
                $("#textarea_desc").focus();
                $("#prev_row").val(row_id);
            }
            if (box_class.indexOf("textarea_desc")>=0) {
                var prev_row=$("#prev_row").val();

                var new_row=$("#prev_row").val().match(/\d+/);
                new_row="#row"+(parseInt(new_row)+1)+"-col1";


                $(new_row).focus();
            }
            break;
    }
});
于 2013-01-17T17:37:09.730 に答える