0

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

下面的代码可以在 row1 中使用标签，将我从 row1 col3 带到 textarea_desc，然后在 textarea_desc 上标签将焦点转移到 row2 col1 但是我看不到光标出现在 row2 col1 ...如果我添加了 css 它是 hsows在 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="" />
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 回答