jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法

更新時(shí)間：2015年07月21日 11:05:06 作者：華宰

這篇文章主要介紹了jquery實(shí)現(xiàn)Ctrl+Enter提交表單的方法,涉及jquery針對(duì)鍵盤按鍵的響應(yīng)與表單操作相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

細(xì)說(shuō)瀏覽器特性檢測(cè)(2)-通用事件檢測(cè)
在上一篇中介紹了jQuery1.4版本新增的幾個(gè)瀏覽器特性檢測(cè)方案和具體的目的，本文將以事件為中心，介紹一個(gè)較為完整、通用的事件檢測(cè)方案。
2010-11-11
基于JQuery 選擇器使用說(shuō)明介紹
本篇文章小編為大家介紹，基于JQuery 選擇器使用說(shuō)明介紹。需要的朋友參考下
2013-04-04
jquery中文亂碼的多種解決方法
jquery中文亂碼的多種解決方法，需要的朋友可以參考一下
2013-06-06
jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery Validate表單驗(yàn)證插件實(shí)現(xiàn)代碼,需要的朋友可以參考下
2017-06-06
通過(guò)Jquery遍歷Json的兩種數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)代碼
在ajax交互中，我們從服務(wù)器端返回的數(shù)據(jù)類型有xml,html,script,json,jsonp,text，本文以json為例，講述了在前臺(tái)如何利用jquery遍歷json的兩種數(shù)據(jù)結(jié)構(gòu)
2011-01-01
jquery實(shí)現(xiàn)邊框特效
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)邊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
使用jQuery簡(jiǎn)化Ajax開(kāi)發(fā) Ajax開(kāi)發(fā)入門
jQuery是一個(gè)可以簡(jiǎn)化 JavaScript™以及AJAX（Asynchronous JavaScript + XML，異步Javascript和XML）編程的Javascript庫(kù)。不同于其他的Javascript庫(kù)，jQuery有他自己的哲學(xué)，使你可以很簡(jiǎn)單的編寫代碼。
2009-10-10
jQuery中on綁定事件后引發(fā)的事件冒泡問(wèn)題如何解決
這篇文章主要介紹了jQuery中on綁定事件后引發(fā)的事件冒泡問(wèn)題及解決辦法，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-05-05
jquery 插件人性化的消息顯示
2008-01-01
jquery 簡(jiǎn)單應(yīng)用示例總結(jié)
jquery 想必大家早已如雷貫耳，本文整理了一些在實(shí)際應(yīng)用中比較常見(jiàn)的功能片段，感興趣的朋友可以學(xué)習(xí)下哦，需要改進(jìn)的地方希望大家不惜指教
2013-08-08