輸入資料自動即時帶入某特定欄位內 (jquery & javascript) & 彈出確定框 (confirm) & 訊息框 (alert)
輸入資料自動即時帶入某特定欄位內
在文字欄位內輸入文字,即時自動帶入某特定欄位內。二種方法供參考之:
範例程式碼(jQuery):
紅色字部份
。本小站下載:
含 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):
紅色字部份
。<!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)
不同顏字部份
。在按下按鈕或某項條件符合下,出現確定框 (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>'; ?>