表單事件與鍵盤事件學習

宋霸霸發表於2024-06-25
事件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>
      * {
        background-color: #d4edda;
        text-align: center;
        font-size: 20px;
      }
      .form-control {
        width: 500px;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      }
      button {
        width: 600px;
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
      }
      .select {
        width: 265px;
        height: 47px;
      }
    </style>
  </head>
  <body>
    <h2 class="title">註冊</h2>
    <form action="" onsubmit="return false;">
        <!-- onsubmit="return false;可以不用提交 -->
      <p>
        賬戶:
        <input type="text" class="form-control" id="account" />
        <div id="ac" style="color: #28a745;font-size: 12px;display: none;">黑執事大人😊</div>
      </p>
      <p>
        密碼:
        <input type="password" class="form-control" id="password" />
        <div id="pw" style="color: #28a745;font-size: 12px;display: none;">黑執事大人好可愛(●'◡'●)</div>
      </p>
      <p>
        省市:
        <select id="prov" class="form-control select">
          <option value="">請選擇</option>
          <option value="1">安徽</option>
          <option value="2">江蘇</option>
          <option value="3">河南</option>
        </select>
        <select id="city" class="form-control select">
          <option value="">請選擇</option>
        </select>
      </p>
      <button>註冊</button>
      <div id="xiaohonghua" style="margin-top:20px";color:red;font-size:18px;display:none;>原始玉尊</div>

    </form>
  </body>
  <script>
    // dom元素新增，修改，刪除
    // append,appendTO,prepend,prependTo
    // after,before,insertAfter,insertBefore
    // 選擇器 第一個，最後一個，奇數，偶數
    // 指定 eq,gt,lt
    // 滑鼠事件:click,dblclick,mouseenter,mouseleave,houer

    // 表單事件
    // 1.submit  當提交表單時，會觸發事件
    // $("form").submit(function(){
    //     // console.log("這是表單事件");
    //     let account = $("#account").val();
    //     alert(account);
    // });
    // $("button").submit(function(){
    //     // console.log("這是表單事件");
    //     let account = $("#account").val();
    //     alert(account);
    // });

    // // 2.change  當select元素髮生變化時，觸發的事件
    // $("#prov").change(function () {
    //  let prov = $("#prov").val();
    //  let html = '<option value="">請選擇</option>';
    //    if (prov == 2) {
    //     html += '<option value="11">黑執事大人1</option>';
    //     html += '<option value="12">黑執事大人2</option>';
    //     html += '<option value="13">黑執事大人3</option>';
    //     html += '<option value="14">黑執事大人4</option>';
    //   }
    //    $("#city").html(html);
    //  });

    // //  3.focus 當元素獲得焦點時，觸發事件
    // $("#accout").focus(function() {
    // //  alert("嘿嘿嘿");
    // //  console.log("請輸入賬戶");
    // //  $("div").show();
    // $("#ac").show();
    // });
    $("password").focus(function() {
    //  console.log("請輸入密碼");
     $("#pw").show();
    });
    $("#account").focus(function () {
      $("#ac").show();
    });
    $("#password").focus(function(){
        $("#pw").show();
    })

    // 4.blur元素失去焦點時，觸發事件
    $("#account").blur(function(){
      $("#ac").hide();
    })
    $("#password").blur(function(){
      $("#pw").hide();
    })

    $("#account").blur(function(){
     let account = $("#account").val();
     console.log(account);
     if(!account){
        $(this).focus();
     }else{
      $("#ac").hide();
     }
    });
    // this，代表本元素，也是選擇器，比較常用


    // 鍵盤事件
    // 按一個鍵，它們三個方法的執行順序是：keydown,keyup,keypress
    // 1.keydown   鍵盤的鍵，按下就觸發事件
    // 鍵盤按下就觸發，但是輸入的文字是按下去，輸入的文字比它晚執行
    $("#account").keydoen(function(){
      let account = $("#account").val();
      $("#xiaohonghua").text(axxount);
      console.log(1);
    })

    // // 3.keypress 鍵盤的鍵，鬆開就觸發事件
    // $("#account").keypress(function(){
    //   let account = $("#account").val();
    //   $("#xiaohonghua").text(axxount);
    //   console.log(1);
    // })

    // //2.keyup 鍵盤的鍵，鬆開就觸發
    // $("#account").keyup(function(){
    //   let account = $("#account").val();
    //   $("#xiaohonghua").text(axxount);
    //   console.log(1);
    // })
  </script>
  </html>

　　

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>
      * {
        background-color: #d4edda;
        text-align: center;
        font-size: 20px;
      }
      .form-control {
        width: 500px;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
      }
      button {
        width: 600px;
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
      }
      .select {
        width: 265px;
        height: 47px;
      }
    </style>
  </head>
  <body>
    <h2 class="title">註冊</h2>
    <form action="" onsubmit="return false;">
        <!-- onsubmit="return false;可以不用提交 -->
      <p>
        賬戶:
        <input type="text" class="form-control" id="account" />
        <div id="ac" style="color: #28a745;font-size: 12px;display: none;">黑執事大人😊</div>
      </p>
      <p>
        密碼:
        <input type="password" class="form-control" id="password" />
        <div id="pw" style="color: #28a745;font-size: 12px;display: none;">黑執事大人好可愛(●'◡'●)</div>
      </p>
      <p>
        省市:
        <select id="prov" class="form-control select">
          <option value="">請選擇</option>
          <option value="1">安徽</option>
          <option value="2">江蘇</option>
          <option value="3">河南</option>
        </select>
        <select id="city" class="form-control select">
          <option value="">請選擇</option>
        </select>
      </p>
      <button>註冊</button>
      <div id="xiaohonghua" style="margin-top:20px";color:red;font-size:18px;display:none;>原始玉尊</div>

    </form>
  </body>

  <script>
    $("form").submit(function(){
       let account = $("#account").val();
       if(!account){
        //  alert('請輸入賬號');
        // $(xiaohonghua).text('請輸入賬號');
        // $(xiaohonghua).show();
        msg("請輸入賬號");
         return false;
       }
       if(!account == 'admin'  || account =="獎勵一朵小紅花"){
        //  alert('賬戶已存在');
        // $(xiaohonghua).text('使用者已存在');
        // $(xiaohonghua).show();
        msg('賬戶已存在')
         return false;
       }
       let password = $("#password").val();
       if(!password){
        //  alert('請輸入密碼');
        // $(xiaohonghua).text('請輸入密碼');
        // $(xiaohonghua).show();
        msg('請輸入密碼');
         return false;
       }
      if(password.length < 6){
        //  alert('請輸入大於6位的密碼');
        // $(xiaohonghua).text('請輸入大於6位的密碼');
        // $(xiaohonghua).show();
        msg('請輸入大於6位的密碼');
         return false;
       }
       alert('註冊成功');
 

    //   
    function msg(data){
        $("#ac_input").text(data);
        $("#ac_input").show();
      }

      $("#account").keydown(function(){
        $("#ac_input").hide();
      })
      $("#password").keydown(function(){
          $("#ac_input").hide();
      })
      $(document).ready(function(){
          alert("歡迎您");
      });
    });

    
  </script>
  </html>

　　

相關文章