35.使用JS jq分別拿到用戶輸入框中的內容

時間 2019-12-14

原文原文鏈接

版本一：JS版css

1.效果html

2.代碼jquery

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>拿到用戶輸入的內容</title>
       <script>
           function leave(){
       var tElement =       document.getElementById("t1");//1.拿到輸入框對象
       var mycontent =   tElement.value;//拿到輸入框內容
           if(mycontent !=""){
               alert(mycontent);
           }else{
               alert("用戶沒有輸入內容");
           }
           }
       </script>
   </head>
   <body>
       輸入內容：<input type="text" id="t1" onblur="leave()" />
   </body>
</html>
字體

版本二：jq版spa

1.效果htm

2.代碼 注意引入jq庫對象

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>jq版本拿到用戶輸入內容</title>
       <script src="../js/jquery-3.2.1.js"></script> 
       <script>
           $(function(){
           $("#pwd").blur(function (){
                   var p =   $("#pwd").val();//拿到用戶輸入的內容這裏是jq對象點方法ip

                 // 設置字體樣式
                   $("#tx").css("color","red"); //設置p元素的樣式顏色爲紅色
                   $("#tx").css("fontSize","20px"); //設置字體大小get

                 //更換id爲tx邊框的內容爲p內容內容替換
                   $("#tx").val(p)
               })
           })
       </script>
   </head>
   <body>
       請輸入密碼：<input type="password" id="pwd" placeholder="這密碼將被拿出來" width="50px" />
       你輸入的密碼是：<input type="text" id="tx" />
   </body>
</html>
input