html隱藏input 已經autofocus 但沒能輸入資料?

html css javascript

alanotmt 2022-09-26 13:27:42 ‧ 1264 瀏覽

分享至

目的是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到那欄位。

請問應如何解決同時隱藏欄位又能在換頁後自動到欄位輸入?

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2022-09-26 14:01:00 檢舉

隱藏起來就沒辦法focus不是很正常嗎...要的話就是解析網址參數，收到參數後用JS解除隱藏，然後再focus。

不過我會建議你用正規的寫法。這樣對資安也比較好。
把form移到另外的頁面，post後跳轉到form裡去，不要搞在同一頁面。

alanotmt iT邦新手 4 級 ‧ 2022-09-26 14:32:05 檢舉

因為我想客人能掃qrcode時會用虛擬鍵盤輸入qrcode的內容，但我不想顯示出來太醜了，所以才用到同一頁面，並隱藏起來。

japhenchen iT邦超人 1 級 ‧ 2022-09-27 10:25:34 檢舉

用input type='hidden' 不香嗎？

japhenchen iT邦超人 1 級 ‧ 2022-09-27 10:30:45 檢舉

換頁繼承前面的輸入的話，建議用cookies 裝載

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

neil_0221

iT邦新手 5 級 ‧ 2022-09-26 13:55:42

最佳解答

你可以試看看改成這樣

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>