在td里回车到下一个元素

Question

在td里回车到下一个元素

发布于
2016-12-19

有一个table 每个tr有5个td,td里分别为input和select
在第一个td的input里回车时自动跳到第二个td的input ...

目前input回车到下一个元素没问题,当在select上回车的时候chrome和ff就不一致了.
chrome下在select回车就会把option打开
ff下在select回车无任何反应

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.bootcss.com/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

$("#testDiv input").keypress(function(e){
    var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

    if (keyCode == 13){
        keyCode == 9;

        var ab = $(this).attr("tagName");
        //console.log(ab)

        if (ab == "INPUT") {
            $(this).parent().next().children().focus();
        }
    }
});

$("#testDiv select").keypress(function(e){
    $(this).parent().next().children().focus();
    console.log($(this))
});
})

</script>
</head>
<body>
<div id="testDiv">
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
            </tr>
            <tr>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
            </tr>
            <tr>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
            </tr>
            <tr>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><select>
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select></td>
                <td><input class="testClass" value="" name="test1" /></td>
                <td><input class="testClass" value="" name="test1" /></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

有2个问题:
1.select元素上回车怎么到下一个input?
2.当在tr里最后一个input上回车怎么跳到下一个tr的第一个input上?

javascript jquery

阅读 3.5k

1 个回答

linong

1.阻止浏览器默认事件。event.prevertDefault()

2.写你想执行的效果。你可以给你所有的input写一个data-index然后你就去找data比当前的大一个的。如果按你现在这个就是从当前行找，找不到从下一行找。

看我下面的贴图，我捕获到了啊