我有这个代码：
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 秒后返回显示 none
问题在于，当用户按下回车键时，输入确实会转换回跨度，但包含与以前相同的数据。我在控制台中将此作为错误消息：
未捕获的 DOMException：无法在“元素”上设置“outerHTML”属性：要删除的节点不再是该节点的子节点。也许它是在“模糊”事件处理程序中移动的？
按下回车键后，我尝试删除事件侦听器，但它仍然显示此错误消息，并且当输入转换回跨度时，不会将新数据显示到跨度中。
请注意，我知道此代码不受 html 注入保护。我很匆忙地写了它，没有花时间来保护它，但我以后会的。所以，不用担心。
哦，另外，请注意，即使数据没有显示在 span 中，ajax 仍然可以正常工作，并且如果满足要求，数据库中的数据也会更改。