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. crontab FAQ

    1.crontab变量问题 crontab中的脚本须要引入系统变量才干找到,否则crontab中的命令找不到系统变量,或者都写绝对路径. 2.1分钟运行一次 */1 * * * * /etc/keep ...

  2. ［当我在研究Cocos-2dx的源代码时，我在想什么］－Ref类，一切的起源

    [名词解释]      引用计数:引用计数是现代内存管理中常常使用到的一个概念.它的基本思想是通过计数方式实现多个不同对象同一时候引用一个共享对象,详细地讲,当创建一个对象的实例并在堆上分配内存时,对 ...

  3. socket编程之中的一个：计算机网络基础

    在開始学习网络之前先复习下计算机网络基础吧. 鲁迅说,天下文章一大抄.看你会炒不会炒,基础知识就抄抄书吧. 一 分层模型 1 为什么分层 为了简化网络设计的复杂性.通讯协议採用分层结构.各层协议之间既 ...

  4. PopupMenu-使用实例跟监听事件

    今天需要给一个控件添加弹出菜单功能.就顺便学习了下popupMenu的使用,记录下来. 它的使用其实也非常的简单,看如下代码 popupMenu = new PopupMenu(MainActivit ...

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

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

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

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

  7. vmstat---有关进程、虚存、页面交换空间及 CPU信息

    虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需要每时每刻使用系统分配的内存空间.当系统运行所需内存超过实际的物理内存,内核会释放某些进程所占用但未使用的部分或所有物理内存 ...

  8. 【2017 Multi-University Training Contest - Team 3】RXD's date

    [Link]: [Description] [Solution] [NumberOf WA] 1 [Reviw] [Code] #include <bits/stdc++.h> using ...

  9. BOM 请给javascript一个说法-------Day33

    楼市低迷,业主是不是该要个说法.黄金暴跌,谁来给大妈们一个说法.中国足球,敢不敢给大家一个说法. 给个说法,谁给,给谁,这该是哲学的范畴了吧. 可是,在这里.BOM是真真切切的给javascript一 ...

  10. js10---call方法总结

    <html> <body> <script type="text/javascript"> function Obj(x, y){ this.x ...