当我选择输入字段并单击按钮以更改占位符/onblur 持有人时,发生了一件奇怪的事情。当我在浏览器中查看 F12 工具时,会创建一个新的 HTML 源文档,该文档在单击按钮更改占位符后仅包含先前选择的占位符。
如果我选择输入字段"名字"并且我当前的语言选择是英语,在单击将 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');">
即使我无法重现您的开发人员工具问题,您的代码中也存在一个错误,可能会导致您感到困惑。
与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')">