目的是A頁跳B頁時直接能夠自動到輸入的欄位,但欄位要隱藏起來。
html的部分
<input style="display:none;" type="text" id="codeid" autofocus>
<button onclick="confirm()">確認並付款</button>
JS的部分
function confirm() {
var code = document.getElementById('codeid').value
console.log(code)
}
問題: 我沒有隱藏時能夠主動跳到輸入欄位並按付款能在console.log看到一樣的資訊
但我一旦隱藏輸入欄位就沒辦法找autofocus到那欄位。
請問應如何解決同時隱藏欄位又能在換頁後自動到欄位輸入?
你可以試看看改成這樣
1.position 主要是讓他離開畫面用 讓使用者看不到
2.display:none; 會將元素拿掉,所以取不到元素
3.visibility: hidden; 元素隱藏但autofocus將會失效,autofocus不支援隱藏的元素
<!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>Document</title>
</head>
<body>
<input style="opacity: 0;position: absolute;top: -100;left: -100;z-index: -100;" type="text" id="codeid" autofocus>
<button onclick="confirm()">確認並付款</button>
<script>
function confirm() {
var code = document.getElementById('codeid').value
console.log(code)
}
</script>
</body>
</html>