发生模糊事件时如何更改节点?
How to change the node when blur event occur?
来源 HTML 结构。
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
事件:在id为data1
的input
中输入test1
后Source HTML struture
变为Target HTML struture
,鼠标焦点离开输入框.
目标 HTML 结构。
<table>
<tr>
<td>class</td>
<td>test1</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
这是我的 JS。
function changeNode(event){
ob =document.activeElement;
_str = ob.value;
ob.parentNode.removeChild(ob);
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
为什么我的JS达不到我的预期目标?
如何解决?
function changeNode(event){
var ob=event.target;
ob.parentNode.append(ob.value);
ob.parentNode.removeChild(ob);
}
document.getElementById("data1").addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
您正在 select 激活活动元素,而事件是对象的焦点丢失。
你应该 select event.target
as ob 并且你的代码应该工作:
另外:您不需要删除对象,您覆盖了所有内部文本,因此对象会自动删除。
function changeNode(event){
ob = event.target;
_str = ob.value;
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
您的代码中存在几个问题:
您需要将事件侦听器添加到 input
本身,而不是 document
对象。然后,您可以简单地使用 event.target
而不是 activeElement
(输入在 blur
事件后不再有效……)
您正在尝试在删除 ob
后访问 ob.parentNode
。首先尝试将其存储在变量中:
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.querySelectorAll("input").forEach(function(input) {
input.addEventListener("blur", changeNode);
});
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
注:querySelectorAll(…).forEach
在某些旧浏览器中可能不可靠,如果您需要支持它们,请参阅 css-tricks.com: Loop Over querySelectorAll Matches
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
来源 HTML 结构。
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
事件:在id为data1
的input
中输入test1
后Source HTML struture
变为Target HTML struture
,鼠标焦点离开输入框.
目标 HTML 结构。
<table>
<tr>
<td>class</td>
<td>test1</td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
这是我的 JS。
function changeNode(event){
ob =document.activeElement;
_str = ob.value;
ob.parentNode.removeChild(ob);
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
为什么我的JS达不到我的预期目标?
如何解决?
function changeNode(event){
var ob=event.target;
ob.parentNode.append(ob.value);
ob.parentNode.removeChild(ob);
}
document.getElementById("data1").addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
您正在 select 激活活动元素,而事件是对象的焦点丢失。
你应该 select event.target
as ob 并且你的代码应该工作:
另外:您不需要删除对象,您覆盖了所有内部文本,因此对象会自动删除。
function changeNode(event){
ob = event.target;
_str = ob.value;
ob.parentNode.innerText = _str;
}
document.addEventListener("blur",changeNode,true);
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
您的代码中存在几个问题:
您需要将事件侦听器添加到
input
本身,而不是document
对象。然后,您可以简单地使用event.target
而不是activeElement
(输入在blur
事件后不再有效……)您正在尝试在删除
ob
后访问ob.parentNode
。首先尝试将其存储在变量中:
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.querySelectorAll("input").forEach(function(input) {
input.addEventListener("blur", changeNode);
});
<table>
<tr>
<td>class</td>
<td><input type="text" id="data1"></td>
</tr>
<tr>
<td>name</td>
<td><input type="text" id="data2"></td>
</tr>
</table>
注:querySelectorAll(…).forEach
在某些旧浏览器中可能不可靠,如果您需要支持它们,请参阅 css-tricks.com: Loop Over querySelectorAll Matches
function changeNode(event) {
var ob = event.target;
var cell = ob.parentNode;
var _str = ob.value;
cell.removeChild(ob);
cell.innerText = _str;
}
document.addEventListener("blur",changeNode,true);