• 欢迎访问开心洋葱网站,在线教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入开心洋葱 QQ群
  • 为方便开心洋葱网用户,开心洋葱官网已经开启复制功能!
  • 欢迎访问开心洋葱网站,手机也能访问哦~欢迎加入开心洋葱多维思维学习平台 QQ群
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏开心洋葱吧~~~~~~~~~~~~~!
  • 由于近期流量激增,小站的ECS没能经的起亲们的访问,本站依然没有盈利,如果各位看如果觉着文字不错,还请看官给小站打个赏~~~~~~~~~~~~~!

使用 Ctrl + Enter 提交表单

JavaScript 水墨上仙 1445次浏览

使用 Ctrl + Enter 提交表单


<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
 
    <title>Text Box Enter</title> 
    <style type="text/css" media="screen"> 
        body {
            font: 16px/1.5 helvetica-neue, helvetica, arial, san-serif;
        }
        textarea {
            border: 1px solid #ccc;
            display: block;
            width: 250px;
            height: 100px;
        }
        p {
            border: 1px solid #ccc;
            background: #ececec;
            padding: 10px;
            margin: 10px 0;
            width: 230px;
        }
        button {
            border: 1px solid #ccc;
            background: #ececec;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            margin-top: 10px;
            padding: 5px 20px;
        }
    </style> 
</head> 
<body> 
    <textarea name="msg" id="msg" placeholder="Your Message" autofocus="true"></textarea> 
    <button type="submit">Post</button> 
    <script type="text/javascript" charset="utf-8" src="https://ajax.useso.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
        $.fn.ctrlEnter = function (btns, fn) {
            var thiz = $(this);
                btns = $(btns);
        
            function performAction (e) {
                fn.call(thiz, e);
            };
            thiz.bind("keydown", function (e) {
                if (e.keyCode === 13 && e.ctrlKey) {
                    performAction(e);
                    e.preventDefault();
                }
            });
            btns.bind("click", performAction);
        }
 
        $("#msg").ctrlEnter("button", function () {
                $("<p class='post'></p>").append(this.val().replace(/\n/g, "<br/>")).fadeIn('slow').prependTo(document.body);
                this.val("");
                });
 
    </script> 
</body> 
</html>


开心洋葱 , 版权所有丨如未注明 , 均为原创丨未经授权请勿修改 , 转载请注明使用 Ctrl + Enter 提交表单
喜欢 (0)
加载中……