這篇文章主要介紹了jquery實現Ctrl+Enter提交表單的方法,涉及jquery針對鍵盤按鍵的響應與表單操作相關技巧,非常簡單實用,需要的朋友可以參考下
本文實例講述了jquery實現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>
希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
