喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(上版面)
喵喵笨兔 の 喵喵的家~遊戲天地 - 首頁(左版面)
首  頁 最新消息 遊戲攻略 遊戲影片 遊戲圖片 下載區 學習分享 留言板 FB粉絲團
 喵喵笨兔 の 喵喵的家~遊戲天地 - 輸入資料自動即時帶入某特定欄位內 (jquery & javascript) & 彈出確定框 (confirm) & 訊息框 (alert)

輸入資料自動即時帶入某特定欄位內 (jquery & javascript) & 彈出確定框 (confirm) & 訊息框 (alert)

輸入資料自動即時帶入某特定欄位內

 在文字欄位內輸入文字,即時自動帶入某特定欄位內。二種方法供參考之:

範例程式碼(jQuery):

  1. 直接以程式碼來說明,必需掛載 jQuery。主要為紅色字部份
  2. jQuery 主站及下載:http://jquery.com/
  3. 本小站下載: 含 Bootstrap 3.3.7 ~ 4.3.1 & jQuery 1.11.3 ~ 3.4.1
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>輸入資料自動即時帶入某特定欄位內</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

<script> 
  $(function(){ 
     $('#test1').bind("keydown keyup", function(){ 
        $('#test2').val($('#test1').val()); 
     }); 
  }); 
</script>

</head>

<body>
 <h3><strong>【範例結果】</strong></h3> 
   <p><input id="test1" placeholder="輸入文字試試"></p> 
   <p>你輸入什麼我就是要跟著您^^:<br> 
   <input id="test2"> </p> 		
</body>
</html>

【範例結果】

你輸入什麼我就是要跟著您^^:


範例程式碼(script):

  1. 直接以程式碼來說明。主要為紅色字部份
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>輸入資料自動即時帶入某特定欄位內</title>

<script> 
  function keytxt(){
    document.getElementById('test4').value=document.getElementById('test3').value; 
    } 
</script>

</head>

<body>
   <h3><strong>【範例結果】</strong></h3>
   <p><input id="test3" placeholder="輸入文字試試" onKeyUp="keytxt()"></p>
   <p>你輸入什麼我就是要跟著您^^:<br>
    <input id="test4"> </p>
		
</body>
</html>    

【範例結果】

你輸入什麼我就是要跟著您^^:


彈出確定框 (confirm) & 訊息框 (alert)

  1. 直接以程式碼來說明。主要為不同顏字部份

 在按下按鈕或某項條件符合下,出現確定框 (confirm) 詢問,或出現訊息框 (alert) 提醒,以下供參考之:

範例程式碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>確定框 (confirm) and 訊息框 (alert)</title>

 <script>
   function show_alert(){
      if(document.getElementById('num1').value > 100){
         alert("您輸入數超過100了!");
         document.getElementById('num1').value="";
         }
      }
</script>

</head>

<body>
  <h3><strong>【範例結果】</strong></h3>
  <p>確定框按"確定"就開啟網頁,按"取消"則取消。</p>
  <a href="http://vv0817.tk/" target="_blank"><button onclick="if(confirm('您確定開啟笨兔網站嗎?')) return true;else return false">笨兔網站</button></a>

  <p>訊息框例1:按下試試唄!</p> <button onclick="alert('您按了我哦!')">按我</button>

  <p>訊息框例2:輸入數字超過100則出現警告訊息!</p>
  <input onKeyUp="show_alert()" id="num1" placeholder="請輸入大於100的數字"> 

</body>
</html>

【範例結果】

確定框按"確定"就開啟網頁,按"取消"則取消。

訊息框例1:按下試試唄!

訊息框例2:輸入數字超過100則出現警告訊息!


訊息框 (alert) 應用於 PHP 程式碼內

<?PHP 
echo '<script>alert("帳密錯誤");history.go(-1);  </script>';
?>
笨兔隨手筆記於 2019/2/21

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv