孙肖宁

jQuery实现回车换行
描述:当页面拥有多个表单输入框的时候,点击回车自动切换到一行,并且下一行已经存在的文字处于选中状态。当鼠标经过某一...
扫描右侧二维码阅读全文
13
2018/05

jQuery实现回车换行

描述:当页面拥有多个表单输入框的时候,点击回车自动切换到一行,并且下一行已经存在的文字处于选中状态。当鼠标经过某一行的时候,该行的文字处于选的状态。所使用的jquery的版本是1.8.
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>回车换行</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            //点击回车之后,自动切换到下一行
            $("input").on("keyup",function (event) {
                if(event.keyCode === 13){
                    $(this).next().next().focus();
                }
            });
            //鼠标经过某一行的时候,该行所有的文字全部被选中
            $("input").on("mouseenter",function () {
                $(this).select();
            });
        })
    </script>
</head>
<body>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
    <input type="text" value="小宁博客"/><br>
</body>
</html>
Last modification:May 13th, 2018 at 05:05 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment