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. osgi实战学习之路:1. ant+bnd+felix搭建osgi之HelloWorld

    开发环境分为三个部份 osgi_provider: bundle开发环境,对外提供服务 osgi_consumer: 引用其他bundle osgi_main: 执行測试 项目主要内容 : commo ...

  2. PAT-中国大学MOOC-陈越、何钦铭-数据结构基础习题集 00-自測4. Have Fun with Numbers (20) 【二星级】

    题目链接:http://www.patest.cn/contests/mooc-ds/00-%E8%87%AA%E6%B5%8B4 题面: 00-自測4. Have Fun with Numbers ...

  3. php数组合并有哪三种方法

    php数组合并有哪三种方法 一.总结 一句话总结:array_merge():array_merge_recursive():‘+'号 $a = array('color'=>'red',5,6 ...

  4. 45. Express 框架 静态文件处理

    转自:http://www.runoob.com/nodejs/nodejs-express-framework.html Express 提供了内置的中间件 express.static 来设置静态 ...

  5. js ---- 函数防抖

    <!DOCTYPE html> <html> <head> <title></title> </head> <body&g ...

  6. Mahout的推荐系统

    Mahout的推荐系统 什么是推荐系统 为什使用推荐系统 推荐系统中的算法 什么是推荐系统 为什么使用推荐系统? 促进厂商商品销售,帮助用户找到想要的商品 推荐系统无处不在,体现在生活的各个方面 图书 ...

  7. svg(1) path路径

    注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/2707 ...

  8. [lougu2243]双端队列搜索

    正统双端队列搜索 回顾:普通队列进行边权为定值的最短路 每次到达都是最优的(意味着不用取min) why? 因为所有状态按照 入队的先后顺序 具有 层次单调性,每次扩展,都往外走一步,满足从起始到该状 ...

  9. reboot---重启Linux系统

    reboot命令用来重新启动正在运行的Linux操作系统. 语法 reboot(选项) 选项 -d:重新开机时不把数据写入记录文件/var/tmp/wtmp.本参数具有“-n”参数效果: -f:强制重 ...

  10. NYOJ 927 The partial sum problem 【DFS】+【剪枝】

    The partial sum problem 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描写叙述 One day,Tom's girlfriend give him a ...