时间戳

首页 > 解决方案 > 单击功能会无意中在调试器中“创建”一个新的 html 文档

javascript - 单击功能会无意中在调试器中“创建”一个新的 html 文档

问题描述

当我选择了一个输入字段并单击一个按钮以更改占位符/ 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');">

标签： javascripthtml

解决方案

尽管我无法重现您的开发人员工具问题，但您的代码中存在错误，可能会导致您感到困惑。

与 不同，该onblur属性placeholder只能包含函数名，不能包含文字字符串。

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')">

推荐阅读