编程 Javascript

jquery实现Ctrl+Enter提交表单的方法

Posted in Javascript onJuly 21, 2015

本文实例讲述了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程序设计有所帮助。

- Author -

华宰

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS中eval函数的使用示例

Jul 21 Javascript

JavaScript保存并运算页面中数字类型变量的写法

Jul 06 Javascript

JS实现隐藏同级元素后只显示JS文件内容的方法

Sep 04 Javascript

js获取地址栏中传递的参数(两种方法)

Feb 08 Javascript

jquery拼接ajax 的json和字符串拼接的方法

Mar 11 Javascript

基于layui的table插件进行复选框联动功能的实现方法

Sep 19 Javascript

vue 中 elment-ui table合并上下两行相同数据单元格

Dec 26 Javascript

VSCode搭建Vue项目的方法

Apr 30 Javascript

vue路由权限校验功能的实现代码

Jun 07 Javascript

JS实现手风琴特效

Nov 08 Javascript

pnpm对npm及yarn降维打击详解

Aug 05 Javascript

uniapp开发打包多端应用完整方法指南

Dec 24 Javascript

jQuery实现html元素拖拽

Jul 21 #Javascript

异步安全加载javascript文件的方法

Jul 21 #Javascript

jquery实现鼠标滑过小图查看大图的方法

Jul 20 #Javascript

详细介绍jQuery.outerWidth() 函数具体用法

Jul 20 #Javascript

SWFObject基本用法实例分析

Jul 20 #Javascript

jQuery.prop() 使用详解

Jul 19 #Javascript

javascript中setAttribute()函数使用方法及兼容性

Jul 19 #Javascript