單擊函數會無意中在調試器中“創建”一個新的 html 文檔

Question

當我選擇了一個輸入字段並單擊一個按鈕來更改占位符/onblur 支架時，會發生一件奇怪的事情。 當我在瀏覽器中查看 F12 工具時，會創建一個新的 HTML 源文檔，在單擊按鈕更改占位符后，該文檔僅包含先前選擇的占位符。

IE。 如果我選擇輸入字段“名字”並且我當前的語言選擇是英語，在單擊將 onblur 占位符更改為意大利語的按鈕后，HTML 文檔僅包含在 onblur 函數中設置的英文名字而沒有其他內容（沒有 HTML ，沒有身體，什么都沒有……）。

為什么以及如何發生這種情況？ 我怎樣才能防止這種情況發生。

您可以使用此代碼重現該問題。

1.) 打開 F12 工具

2.) 選擇任何輸入字段

3.) 單擊任何按鈕

 let fname = document.getElementById("fname"); let lname = document.getElementById("lname"); let email = document.getElementById("email"); const placeholders = { sl: { fname: "Janez", lname: "Novak", email: "moj@email.si" }, en: { fname: "John", lname: "Doe", email: "my@email.us" }, de: { fname: "Kommissar", lname: "Rex", email: "mein@email.deu" }, it: { fname: "Julius", lname: "Cezar", email: "barilla@email.it"}, hr: { fname: "Mirko", lname: "Mirkic", email: "moj@email.hr"}, ru: { fname: "Joseph", lname: "Lenin", email: "moji@email.ru"} }; const blurholders = { sl: { fname: "Janez", lname: "Novak", email: "moj@email.si" }, en: { fname: "John", lname: "Doe", email: "my@email.us" }, de: { fname: "Kommissar", lname: "Rex", email: "mein@email.deu" }, it: { fname: "Julius", lname: "Cezar", email: "barilla@email.it"}, hr: { fname: "Mirko", lname: "Mirkic", email: "moj@email.hr"}, ru: { fname: "Joseph", lname: "Lenin", email: "moji@email.ru"} }; function setInputs(language) { if (Object.keys(placeholders).includes(language)){ const values = placeholders[language]; fname.setAttribute("placeholder", values.fname); lname.setAttribute("placeholder", values.lname); email.setAttribute("placeholder", values.email); } } function setOnBlurs(language) { if(Object.keys(blurholders).includes(language)){ const valuesB = blurholders[language]; fname.setAttribute("onblur", valuesB.fname); lname.setAttribute("onblur", valuesB.lname); email.setAttribute("onblur", valuesB.email); } }

 <input type="text" name="fname" id="fname" required maxlength="50" minlength="1" placeholder="Janez" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Janez'" /><br /> <input type="text" name="lname" id="lname" required maxlength="50" minlength="1" placeholder="Novak" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Novak'" /><br /> <input type="email" name="email" id="email" autofocus="autofocus" required placeholder="moj@email.com" onfocus="this.placeholder = ''" onblur="this.placeholder = 'moj@email.com'" /> <br /> <input type="button" value="setInputs SI" onclick="setInputs('sl'); setOnBlurs('sl');"> <input type="button" value="setInputs EN" onclick="setInputs('en'); setOnBlurs('en');"> <input type="button" value="setInputs DE" onclick="setInputs('de'); setOnBlurs('de');"> <input type="button" value="setInputs IT" onclick="setInputs('it'); setOnBlurs('it');"> <input type="button" value="setInputs HR" onclick="setInputs('hr'); setOnBlurs('hr');"> <input type="button" value="setInputs RU" onclick="setInputs('ru'); setOnBlurs('ru');">

Answer 1

盡管我無法重現您的開發者工具問題，但您的代碼中存在一個錯誤，可能會讓您感到困惑。

與placeholder不同， onblur屬性只能包含函數名而不是文字字符串。

onblur="Janez"拋出錯誤，因為瀏覽器正在尋找名為 Janez 的函數

您不需要重置占位符的值。 如果字段在模糊時為空，則占位符將再次顯示。

以下屬性應該足以滿足您的輸入。

<input type="text" name="fname" id="fname" required="" maxlength="50" minlength="1" placeholder="Janez">

就按鈕而言，我認為setOnBlurs毫無意義

<input type="button" value="setInputs SI" onclick="setInputs('sl')">