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. Linux监控（OS，MySQL，Tomcat，Apache）

    关于逐步脱离开发岗位的意见,老大已经批准了,接下来我的主要工作就是"运维+数据库管理".感谢杰民兄和小马哥能接受我的骚扰.接下来还会去骚扰他们,同一时候也会去骚扰董大爷,小刚总,心 ...

  2. js插件---tree（多级文件）插件如何使用

    js插件---tree(多级文件)插件如何使用 一.总结 一句话总结:还是一般的引入js和css后js调用的方式, 只不过tree调用的时候必须设置一个 HTML 模板(就是调用的那段html代码,别 ...

  3. CentOS 7.0yum安装MySQL

    CentOS 7.0yum安装MySQL 1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noar ...

  4. Spring 配置自动扫描原理说明

    Spring利用IOC容器将所有的bean进行有秩序的管理维护,而实际项目中不可能在xml文件中创建bean,而是利用了Spring的组件自动扫描机制,通过在classpath自动扫描的方式把组件纳入 ...

  5. Impala SQL

    不多说,直接上干货! 其实,跟hive差不多,大家可以去参考我写的hive学习概念系列. Impala SQL VS HiveQL 下面是Impala对基础数据类型和扩展数据类型的支持 • 此外,Im ...

  6. 一款开源Office软件---Lotus Symphony在Linux系统下的应用

    点击下载观看试用录像   Linux系统下的办公软件有OpenOffice.永中Office.红旗Red Office.金山Wps Office及StarOffice等,今天我为大家介绍IBM推进军O ...

  7. docker的数据持久化

    挂载宿主机的目录(实现很多容器共用一个宿主卷) [root@localhost ~]# docker run -itd --name web01 -v /var/www/html:/var/www/h ...

  8. python try except 捕捉错误得到错误的时候的值

    try: dict_reason = self.get(name,id_number,mobile,card_number,**kwargs) except RetryError as e: # 获取 ...

  9. Java表单设计器orbeon点滴

    包含表单设计器和运行展现 一个完整的应用 页面部分都是使用XML和XHTML进行服务端的组合出来的,具体逻辑有些复杂 设计器缺少一个最常用的:repeat,如果需要只能手动编写代码(参考官方文档步骤有 ...

  10. 牛客网剑指offer刷题总结

    二维数组中的查找: 题目描述:在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 两 ...