Как изменить узел, когда происходит размытие? - PullRequest
Новая
       27

Как изменить узел, когда происходит размытие?

0 голосов
/ 09 октября 2018

Исходная структура 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>

Событие: Source HTML struture превращается в Target HTML struture после ввода test1 в input с идентификатором data1 и фокус мыши выходит изinput.

Целевая структура 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 не может достичь ожидаемой цели?
Какэто исправить?

Ответы [ 4 ]

0 голосов
/ 09 октября 2018 
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);
0 голосов
/ 09 октября 2018

Вы выбираете активный элемент, когда происходит событие, когда фокус объекта теряется.Вы должны выбрать event.target как 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>
0 голосов
/ 09 октября 2018

Несколько проблем в вашем коде:

  1. Вам необходимо добавить прослушиватель событий к самому input, а не к объекту document.Затем вы можете просто использовать event.target вместо activeElement (ввод больше не активен после события blur ...)

  2. Вы пытаетесь получить доступ к ob.parentNode после удаленияob.Попробуйте сначала сохранить его в переменной: 

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: LoopOver querySelectorAll Matches

0 голосов
/ 09 октября 2018 

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>
...