Question

基本上我有一系列5行文本框（每行包含3列）和单个文本区域...在column3末尾的tabbing应该将它带到文本区域然后从文本区域切换应该采取我到下一行输入/文本框。

下面的代码工作到指向row1的范围，从row1 col3到textarea_desc，然后tabta on textarea_desc将焦点转移到row2 col1但是我看不到光标出现在row2 col1 ...如果我添加css它在row2 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="" />

Answer 1

这是因为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;
    }
});

工作代码：

{{1}}

能够聚焦但不使用jquery键入输入框

1 个答案: