iT邦幫忙

0

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

  • 分享至 

  • xImage

目的是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的內容,但我不想顯示出來太醜了,所以才用到同一頁面,並隱藏起來。
用input type='hidden' 不香嗎?
換頁繼承前面的輸入的話,建議用cookies 裝載
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

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>
alanotmt iT邦新手 4 級 ‧ 2022-09-26 13:58:28 檢舉

好主意誒,直接移到看不到的地方就好了。

菜雞 iT邦新手 5 級 ‧ 2022-09-29 13:17:40 檢舉

或是 opacity: 0 也可以試試

我要發表回答

立即登入回答