js进阶 12-16 jquery如何实现通过点击按钮和按下组合键两种方式提交留言

程序员浩云技术 2022年11月16日

0 收藏 428 点赞 4,847 浏览 1367 个字

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>