如果我不按住鼠標左鍵單擊，輸入字段會失去焦點

Question

這是 100% 的代碼：

<html lang="en">
<head>
    <title>Test</title>
    <script defer src="index.js"></script>
</head>
<body>
    <span id="spanName">Hi</span>
</body>
</html>

const mySpan = document.getElementById('spanName');

mySpan.addEventListener('click', e =>{
    document.getElementById('spanName').innerHTML = "<form><input type=\"text\" placeholder=\"enter name\"></input></form>"
})

這基本上可以滿足我的要求。 當我點擊這個跨度時，它會用輸入表單替換內部 HTML。 唯一的問題是，除非您按住鼠標左鍵，否則它不會保持焦點。 沒有其他使用 hover 或焦點或任何會與焦點競爭的東西。

我最好的猜測是它與我使用“點擊”事件偵聽器的事實有關，這就是與焦點競爭的事情，但顯然當我取消單擊鼠標時表單並不會消失，所以這種行為對我來說有點令人困惑。

注意，我對 JavaScript 很陌生，根據行為，我認為這不是 go 的正確方法。 我已經開始寫一堆 CSS （我也是新手），我目前在頂部有一個基本的導航欄，上面有一個完整的錨標簽，當我在它們上 hover 時突出顯示它們，但我正在嘗試將它添加到導航欄作為一個跨度，以便它顯示“登錄”，然后當用戶單擊它時，跨度更改為登錄/密碼表單，而不會影響導航欄的其他組件。

也就是說，從美學上講，除了這個焦點問題之外，一切似乎都按照我的意圖進行。 由於這是這個最小示例中的一個問題，我假設這是一個獨立於我編寫的其他代碼的問題

提前致謝！

Answer 1

只需為您的輸入定義一個 ID，然后調用焦點 function。

 const mySpan = document.getElementById('spanName'); mySpan.addEventListener('click', e =>{ document.getElementById('spanName').innerHTML = "<form><input type=\"text\" id=\"myInput\" placeholder=\"enter name\"></input></form>"; document.querySelector("#myInput").focus(); })

 <html lang="en"> <head> <title>Test</title> <script defer src="index.js"></script> </head> <body> <span id="spanName">Hi</span> </body> </html>

Answer 2

正如@Vinicius 在他的回答中所證明的那樣，在輸入元素上添加.focus()會有所幫助。

我修改了您的 HTML 一點，因為我用<form>元素替換了您的<span> 。 為了使它表現得像一個跨度，我添加了一些display:inline-block樣式。 我還添加了一個.onsubmit處理程序，它將在您按下回車后處理輸入值。

 document.getElementById('frmName').onclick = e =>{ const frm=e.target frm.innerHTML = "<input type=\"text\" placeholder=\"enter name\">"; const inp=frm.children[0]; frm.onsubmit=ev=>(console.log("you entered:",inp.value),false) inp.focus(); }

 form {display:inline-block; cursor: pointer}

 <html lang="en"> <head> <title>Test</title> </head> <body> abc<form id="frmName">Hi, click me!</form>def </body> </html>

如果我不按住鼠標左鍵單擊，輸入字段會失去焦點

問題描述

2 個解決方案

解決方案1
1 2021-04-12 21:35:55

解決方案2
0 2021-04-13 04:31:03

如果我不按住鼠標左鍵單擊，輸入字段會失去焦點

問題描述

2 個解決方案

解決方案1 1 2021-04-12 21:35:55

解決方案2 0 2021-04-13 04:31:03

解決方案1
1 2021-04-12 21:35:55

解決方案2
0 2021-04-13 04:31:03