DOM操作中直接用ele.value赋值和用setAtrribute("value","xxx")有什么区别吗

Question

比如我要设置一个input显示的值,获得焦点后清空显示的值，如果Input没有输入就失去焦点，继续显示默认值

用setAtrribute会出现这样的情况

我在input里输入了内容，然后又删除掉，再失去焦点的时候，input显示的值不会变成默认值,而是什么都不显示

用ele.value=xxx就没问题

<input type="text" value="这是属性" onfocus="f1()" onblur="f2()">



    function f1() {
        var ele=document.getElementsByTagName("input")[0];
        if(ele.value===ele.defaultValue){
            ele.value="";
        }
        }
   function f2() {
            var ele=document.getElementsByTagName("input")[0];
    if(ele.value===""){
        ele.value=ele.defaultValue;
    }
}

Answer 1

setAttribute()方法修改的是input 的默认属性,也就是说在聚焦时将input的defaultValue属性设置为了空字符串，可使用变量先将value存储。

let defaultValue = document.getElementsByTagName('input')[0].defaultValue;

function f1() {
  var ele = document.getElementsByTagName("input")[0];
  if (ele.value === ele.defaultValue) {
    ele.setAttribute('value', '');
  }
}
function f2() {
  var ele = document.getElementsByTagName("input")[0];
  if (ele.value === "") {
    ele.setAttribute('value', defaultValue);
  }
}