zoukankan      html  css  js  c++  java
  • 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+'
    '
    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+'
    '
    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+'
    '
    30                 $('#txt2').val(str2)
    31                 $('#txt1').val('')
    32             }
    33         })
    34     </script>
    35 </body>
    36 </html>
     
  • 相关阅读:
    各种算法时空复杂度
    Python文本处理(1)
    数学之路(3)-机器学习(3)-机器学习算法-欧氏距离(3)
    为什么要选择cdn加速
    数据库中操作XML(openXML)
    HDU 3308 LCIS
    Android有效解决加载大图片时内存溢出的问题
    Pathchirp—有效的带宽估计方法(二)
    php三元运算
    C# MVC 自学笔记—4 添加视图
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9293864.html
Copyright © 2011-2022 走看看