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. Android 4.4 Fence在SurfaceFlinger中的应用

    网上关于android.fence的资料好少啊.差点儿没有,可是这个机制又在GUI系统中起着关键的数据,于是自己通读源代码和凝视.与大家分享下Fence究竟是怎么回事? Fence即栅栏.栅栏的角色与 ...

  2. HDU 5375 Gray code （简单dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5375 题面: Gray code Time Limit: 2000/1000 MS (Java/Oth ...

  3. 一些安全的DNS提供商

    检测当前使用的DNS服务器    https://dnsleaktest.com 一些安全的DNS提供商 DNS提供商名称 主DNS服务器 次要DNS服务器 Google 8.8.8.8 8.8.4. ...

  4. android 图片特效处理之光晕效果

    这篇将讲到图片特效处理的图片光晕效果.跟前面一样是对像素点进行处理,本篇实现的思路可参见android图像处理系列之九--图片特效处理之二-模糊效果和android图像处理系列之十三--图片特效处理之 ...

  5. smarty课程---最最最简单的smarty例子

    smarty课程---最最最简单的smarty例子 一.总结 一句话总结:其实所有的模板引擎的工作原理是差不多的,无非就是在php程序里面用正则匹配将模板里面的标签替换为php代码从而将两者混合为一个 ...

  6. windows 常见环境变量（%AppData%、%TEMP%、%TMP%）

    set 命令查看全部环境变量: %AppData%(应用程序数据).%TEMP%(临时文件夹).%TMP%(临时文件夹) .%LocalAppData%(应用程序本地数据)三个环境变量: C:\Use ...

  7. vue -- config index.js 配置文件详解

    此文章介绍vue-cli脚手架config目录下index.js配置文件 此配置文件是用来定义开发环境和生产环境中所需要的参数 关于注释 当涉及到较复杂的解释我将通过标识的方式(如(1))将解释写到单 ...

  8. BZOJ 4582 贪心

    思路: 显然是个贪心 排个序 然后扫几遍就好了 (重叠的区间不能取) //By SiriusRen #include <cstdio> #include <algorithm> ...

  9. HDU——T 3746 Cyclic Nacklace

    http://acm.hdu.edu.cn/showproblem.php?pid=3746 Time Limit: 2000/1000 MS (Java/Others)    Memory Limi ...

  10. struct数组初始化

    const int MAXN=100; struct A { int a,b; }; struct A arr[100];//此时编译通过 struct A arr[MAXN];//此时编译不通过,原 ...