微信扫一扫打赏支持

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、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style type="text/css">
10         #txt1,textarea{width: 200px}
11     </style>
12 </style>
13 </head>
14 <body>
15     <input type="text" id="txt1"><br><input id="btn1" type="button" value="提交"><br>
16     <textarea id="txt2" rows="10" cols="30"></textarea><br>
17     <script>
18         $('#btn1').click(function(){
19             var str1=$('#txt1').val()
20             var str2=$('#txt2').val()
21             str2+=str1+'\n'
22             $('#txt2').val(str2)
23             $('#txt1').val('')
24         })
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         })
34     </script>
35 </body>
36 </html>

 

 

 

 
posted @ 2018-07-11 12:41  范仁义  阅读(580)  评论(0)  编辑  收藏  举报