当前位置: 首页 > 编程笔记 >

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

陈野
2023-03-14
本文向大家介绍jquery实现Ctrl+Enter提交表单的方法,包括了jquery实现Ctrl+Enter提交表单的方法的使用技巧和注意事项,需要的朋友参考一下

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

 类似资料:
  • 本文向大家介绍使用JQuery实现Ctrl+Enter提交表单的方法,包括了使用JQuery实现Ctrl+Enter提交表单的方法的使用技巧和注意事项,需要的朋友参考一下 有时候我们为了省事就操作键盘组合键去代替使用鼠标,我们今天就使用JQuery实现Ctrl+Enter提交表单。 我们发帖时,在内容输入框中输入完内容后,可以点击“提交”按钮来发表内容。可是,如果你够“懒”,你可以不用动鼠标,只需

  • 本文向大家介绍js实现键盘Enter键提交表单的方法,包括了js实现键盘Enter键提交表单的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现键盘Enter键提交表单的方法。分享给大家供大家参考。具体实现方法如下: 最后只需要在body中加入:<body onkeydown="keyDown(event);">。   或者如下方法,但是在火狐浏览器下不兼容: 希望本文所述对大家

  • 问题内容: 我有一个沼泽标准的登录表单-使用HTML / jQuery的AIR项目上的电子邮件文本字段,密码字段和提交按钮。当我在表单上按Enter键时,整个表单的内容消失了,但是表单没有提交。有谁知道这是Webkit的问题(Adobe AIR使用Webkit的HTML)还是我捆绑了东西? 我试过了: 但这既没有停止清算行为,也没有提交表格。没有与表单相关的操作-可能是问题吗?我可以在动作中添加J

  • 本文向大家介绍jQuery实现表单提交时判断的方法,包括了jQuery实现表单提交时判断的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现表单提交时判断的方法。分享给大家供大家参考。具体实现方法如下: 换成: 使用: 表单提交js: 希望本文所述对大家基于jQuery的web程序设计有所帮助。

  • 本文向大家介绍jquery实现ajax提交表单信息的简单方法(推荐),包括了jquery实现ajax提交表单信息的简单方法(推荐)的使用技巧和注意事项,需要的朋友参考一下 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery,基本上是现学现找,有点困难。 主要是扩展和拼接json转对象 很简单,附上代码: 使用的话配合jquery va

  • 问题内容: 在这种特殊情况下,按Enter键时必须使这些输入调用函数的选项是什么? 问题答案: Angular开箱即用。您是否在表单元素上尝试了ngSubmit? 编辑:根据有关提交按钮的注释,该解决方案包括: 如果您不喜欢隐藏的提交按钮解决方案,则需要将控制器功能绑定到Enter keypress或keyup事件。这通常需要一个自定义指令,但是AngularUI库已经设置了一个不错的按键解决方案