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

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为data1input中输入test1Source 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>

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

  1. 您需要将事件侦听器添加到 input 本身,而不是 document 对象。然后,您可以简单地使用 event.target 而不是 activeElement(输入在 blur 事件后不再有效……)

  2. 您正在尝试在删除 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);