js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言
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如何实现通过点击按钮和按下组合键两种方式提交留言的更多相关文章
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-9/10 jquery如何实现三级列表
js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
- js进阶课程 12-9 jquery的事件对象event的方法有哪些？
js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- js进阶 9-10 html控件如何实现点击自动选择控件内容
js进阶 9-10 html控件如何实现点击自动选择控件内容 一.总结 一句话总结: 1.在click事件中,如果focus,那就select 2.blur 1.html中控件添加两种方式? 在表单 ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
随机推荐
- 改动UINavigationBar （导航栏）上NavigationBarItem 的字体大小和颜色的用法
//创建一个左边button UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" ...
- Linux获取进程中变量
列出所有进程 #include <linux/kernel.h> #include <linux/module.h> #include <linux/init.h> ...
- ElasticSearch 在Hadoop生态圈的位置
它的位置非常清晰,直接贴图. 更详细点,见
- Mvc异步
<h3>MVC 自带的yibu请求</h3> <%-- 1.要执行的方法,2.控制器,3.Ajax操作--%> <%using (Ajax.BeginForm ...
- hadoop安装报错
1.Hadoop安装完后,启动时报Error: JAVA_HOME is not set and could not be found. 解决办法: 修改/etc/hadoop/hadoop-env. ...
- Vue 导出表格为Excel
放法有多种,我这里是直接转JSON数据为Excel. 1.既然要使用,那首先当然是安装依赖,在终端命令输入: npm install -S file-saver xlsx npm install -D ...
- python +uiautomator 安卓UI控件操作
一.搭建环境 准备:win7.JDK.androidSDK(adt-bundle-windows-x86_64-20140702\sdk).Appium.安卓模拟器(真机也可以),可以到这个地址下载h ...
- JS原生方法被覆盖后的恢复办法
alert 被覆盖 今天装修博客园,调试了下JS代码发现 alert() 方法被官方覆盖了,查看源码得知 alert 的功能被替换成了 console.log. 恢复 var _frame = doc ...
- activity-启动动画的设定（下面弹出出现，弹入下面消失）
1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...
- 逐步配置企业版Symantec Norton防病毒服务器
逐步配置企业版Symantec Norton防病毒服务器 配置企业版Symantec Norton NT操作系统,已经安装IIS 安装Symantec Norton 10 安装系统中心 650) th ...