輸入資料自動即時帶入某特定欄位內 (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>';
?>