首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

运用 Ctrl + Enter 提交表单

2012-06-29 
使用 Ctrl + Enter 提交表单?使用 Ctrl + Enter 提交表单!DOCTYPE HTML html headmeta http-equiv

使用 Ctrl + Enter 提交表单

?

使用 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.googleapis.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>
?

热点排行