如何解决eventlistener“ blur”并设置outerHTML
我有此代码：
function setInfo(id,idelem2) {
let myElement = document.getElementById(idelem2).outerHTML;
let test = document.getElementById(idelem2);
let tag = test.tagName;
test.outerHTML = "<input id='"+idelem2+"' type='text' autocomplete='off'>";
let myInput = document.getElementById(idelem2);
document.getElementById(idelem2).focus();
function escapeHTML(text) {
var map = {
'&': '&','<': '<','>': '>','"': '"',"'": '''
};
return text.replace(/[&<>"']/g,function(m) { return map[m];
});
}
document.addEventListener('mousedown',function(event) {
myInput.outerHTML = myElement;
return false;
})
myInput.addEventListener('keyup',function(event) {
if(event.keyCode === 13) {
let newvalue = myInput.value;
$(document).ready(function() {
let post = {};
post[id] = newvalue;
$.ajax({
type: 'POST',url: 'traitements/traitement-profil.php',data: post,dataType: 'text',success: function(data) {
if(data != "Operation réussie !") {
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-danger my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
}
if(data == "Operation réussie !") {
if(idelem2 == "monSite") {
if(newvalue == "") {
myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
return;
}
myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='"+newvalue+"' target='_blank' >Site personnel</a>";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
return;
}
if(idelem2 == "monGithub") {
if(newvalue == "") {
myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
return;
}
myInput.outerHTML = "<a class='text-white' id="+idelem2+" href='https://github.com/"+newvalue+"' target='_blank' >"+newvalue+"</a>";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
return;
}
if(newvalue == "") {
myInput.outerHTML = "<"+tag+" id="+idelem2+">"+"Non renseigné !</"+tag+">";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
} else {
myInput.outerHTML = "<"+tag+" id="+idelem2+">"+newvalue+"</"+tag+">";
let errorWindow = document.getElementById('erreur');
errorWindow.className = "alert alert-success my-5 text-center";
errorWindow.innerHTML = data;
setTimeout(() => {
errorWindow.className = "alert alert-danger my-5 text-center d-none";
},4500);
}
} else {
myInput.outerHTML = myElement;
}
}
});
});
} else if(event.keyCode === 27) {
myInput.outerHTML = myElement;
return;
}
})
}
简单的解释是： 在我的用户个人资料页面上，我具有该用户的所有信息，每个信息旁边都有一个图标。 当用户单击图标时，包含信息的范围将转换为输入。 我把重点放在创建的输入上。 我添加了一个均匀的侦听器，因此如果输入失去焦点，它会变回一个跨度。并退出该功能。 我添加了另一个事件侦听器，因此，如果用户输入了某些内容（或未输入），然后按enter键，则新输入将被处理（类似于一种形式），并且输入转换回包含新数据的范围。我还添加了一个小窗口，通知更改是否有效，在4.5秒后又没有显示
问题在于，当用户按下Enter键时，输入会转换回一个跨度，但包含的数据与以前相同。 我在控制台中将其作为错误消息得到：
Uncaught DOMException: Failed to set the 'outerHTML' property on 'Element': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?
按下回车键后，我试图删除事件侦听器，但是它仍然显示此错误消息，并且当输入转换回跨度时，不会在跨度中显示新数据。
请注意，我知道此代码无法防止html注入。我很着急地写了它，并没有花时间来保护它，但是将来我会的。因此，不用担心。 ：）
哦，还要注意，即使没有在跨度中显示数据，Ajax仍然可以正常工作，并且如果满足要求，数据库中的数据也会更改。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
