js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

一、总结

一句话总结：实现按下组合键提交留言是通过给input加keydown事件，判断按键的键码来实现的。

1、如何判断同时按下了ctrl键和回车键？

25         $('#txt1').keydown(function(e){

26             if (e.which==13&&e.ctrlKey) {

2、实现组合按键提交留言时候的事件监听对象是谁？

input 文本框

25         $('#txt1').keydown(function(e){

26             if (e.which==13&&e.ctrlKey) {

3、如何实现按下组合键提交留言？

实现按下组合键提交留言是通过给input加keydown事件，判断按键的键码来实现的。

25         $('#txt1').keydown(function(e){

26             if (e.which==13&&e.ctrlKey) {

27                 var str1=$('#txt1').val()

28                 var str2=$('#txt2').val()

29                 str2+=str1+'\n'

30                 $('#txt2').val(str2)

31                 $('#txt1').val('')

32             }

33         })

4、回车键和ctrl键的键码分别是多少？

13 和 e.ctrlKey

26             if (e.which==13&&e.ctrlKey) {

二、jquery如何实现通过点击按钮和按下组合键两种方式提交留言

1、相关知识

提交留言

案例描述：通过点击按钮和按下组合键两种方式提交留言.

案例重点：该案例本身非常简单，目的在于提高大家应用学过的知识点解决实际的问题的能力。

 

2、代码

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

         #txt1,textarea{width: 200px}

     </style>

 </style>

 </head>

 <body>

     <input type="text" id="txt1"><br><input id="btn1" type="button" value="提交"><br>

     <textarea id="txt2" rows="10" cols="30"></textarea><br>

     <script>

         $('#btn1').click(function(){

             var str1=$('#txt1').val()

             var str2=$('#txt2').val()

             str2+=str1+'\n'

             $('#txt2').val(str2)

             $('#txt1').val('')

         })

         $('#txt1').keydown(function(e){

             if (e.which==13&&e.ctrlKey) {

                 var str1=$('#txt1').val()

                 var str2=$('#txt2').val()

                 str2+=str1+'\n'

                 $('#txt2').val(str2)

                 $('#txt1').val('')

             }

         })

     </script>

 </body>

 </html>
 

js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言的更多相关文章

  1. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  4. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  5. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  6. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  7. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  8. js进阶 9-10 html控件如何实现点击自动选择控件内容

    js进阶 9-10  html控件如何实现点击自动选择控件内容 一.总结 一句话总结: 1.在click事件中,如果focus,那就select 2.blur 1.html中控件添加两种方式? 在表单 ...

  9. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

随机推荐

  1. 69.nodejs对mongodb数据库的增删改查操作

    转自:https://www.cnblogs.com/sexintercourse/p/6485381.html 首先要确保mongodb的正确安装,安装参照:http://docs.mongodb. ...

  2. MATLAB 最优化计算 （二）

    matlab 程序设计 1, for start:increment:end  若默认步长为1,则为 for start:end ———— end while  condition ————  end ...

  3. OpenCV —— 视频播放控制

    创建滚动条,实现滚动条随视频播放移动. #include "cv.h" #include "highgui.h" CvCapture* capture=NULL ...

  4. gdb x查看二进制

    参考 http://blog.csdn.net/allenlinrui/article/details/5964046 (gdb) disassemble main Dump of assembler ...

  5. ANSI-X99MAC算法和PBOC的3DES MAC算法

    仅仅要有标准的DES加密和解密算法.类似ANSI-X99MAC算法和PBOC3DES算法就非常好实现.他们都是用DES算法再经过一层算法实现的.实现原理看图就能看明确.3DES算法实现就更简单了.就是 ...

  6. HDOJ 5357 Easy Sequence DP

    a[i] 表示以i字符开头的合法序列有多少个 b[i] 表示以i字符结尾的合法序列有多少个 up表示上一层的'('的相应位置 mt[i] i匹配的相应位置 c[i] 包括i字符的合法序列个数  c[i ...

  7. Django加入JS，CSS，图片等外部文件的方法

    Django加入JS,CSS.图片等外部文件的方法 By 白熊花田(http://blog.csdn.net/whiterbear) 转载需注明出处,谢谢. 在使用Django搭建站点时,往往须要使用 ...

  8. js35

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 5.Node.js 安装配置

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html Node.js安装包及源码下载地址为:https://nodejs.org/en/downlo ...

  10. 26.多线程join detach

    #include <iostream> #include <thread> #include <array> #include <Windows.h> ...