发生模糊事件时如何更改节点？

Question

来源 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达不到我的预期目标？
如何解决？

Answer 1

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>

Answer 2

您正在 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>

Answer 3

您的代码中存在几个问题：

您需要将事件侦听器添加到 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

Answer 4

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);

发生模糊事件时如何更改节点？

How to change the node when blur event occur?

javascript

events

blur