SetAttribute在IE中不起作用

Question

此变量表示type = text

的输入

var x=document.getElementById('fiber-count');

我有这个功能：

x.onkeyup=function(){
var u=x.value;
var v=parseInt(u);
var n=isNaN(u);

if(n){
    this.setAttribute('placeholder', 'Invalid Character');

    setTimeout(function(){this.setAttribute('placeholder','');},3000);
    x.value="";

}
if(v<1){
    this.setAttribute('placeholder', "Min. value is 1");
    setTimeout(function(){this.setAttribute('placeholder','');},3000);
    x.value='';
}
if(v>864){
    this.setAttribute('placeholder', 'Max. value is 864');
    setTimeout(function(){this.setAttribute('placeholder','');},3000);
    x.value='';
};

if(v<=12&&v>=1){
    tr.removeAttribute('disabled');
}else{
    tr.setAttribute('disabled', 'disabled');
}

if(v==2){
    swr.removeAttribute('disabled');
}else{
    swr.setAttribute('disabled', 'disabled');
}
if(v!==2){
    document.getElementById('cable_type').selectedIndex='0';
    f_c.classList.remove('hidden');
    var top=document.getElementsByName('subunit');
    for(i=0; i<top.length; i++){
        top[i].removeAttribute('disabled');
    }

}
if(v==1){
    document.getElementById('radio_option_1').checked=true;
}
if(v==12&&bast[0].checked){
    document.getElementById('diameter').selectedIndex='3';
}
if(v>=12||v==8){
    document.getElementById('sub_four').removeAttribute('disabled');
    console.log('ribbon ought to be enabled');
}else{
    //document.getElementById('sub_four').setAttribute('disabled',    'disabled');
    document.getElementById('sub_four').setAttribute('disabled', 'disabled');
    console.log('ribbon disabled')
}
};

问题在于：没有一个setAttribute（）方法在IE中工作。我无法弄清楚原因。我使用setAttribute（）方法设置几个元素的占位符和禁用属性。问题是：当我在输入中键入12时，我收到此错误消息。

我试图使用属性表示法

element.disabled=true;

但这似乎不起作用，好像通过属性表示法设置它并不会立即更新它或其他东西。我发布了一个小提琴，但这不会起作用，因为这个bug只发生在IE中，所以JSFiddle不会复制它。

有什么方法可以纠正这个吗？可能是polyfill？请不要Jquery。

Answer 1

this处理程序中的

setTimeout指的是window而不是<div id="fiber-count">。您需要存储this并在setTimeout。

中使用它

var self = this;
setTimeout(function(){self.setAttribute('placeholder','');},3000);

或者，

setTimeout(function(){this.setAttribute('placeholder','');}.bind(this),3000);

Answer 2

这里的问题是setTimeout在其他上下文中运行，然后关键字this没有引用x，这意味着不是DOM元素，而是全局对象（window ）。

而是使用this关键字，使用变量x来引用您的DOM元素，例如：

x.setAttribute代替this.setAttribute

在这里，您可以使用此模型进行测试：

var x = { 
    onkeyup: function() {
        console.log("this = x:", this === x);
        console.log("this.value:", this.value); //x.value = "hello"
        setTimeout(function() {
            console.log("-setTimeout-");
            console.log("this:", this); //window, not 'x' as expected
            console.log("this.value:", this.value); //undefined
        }, 3000);
    },
    value: 'hello'
};

console.log(x.value);
x.onkeyup();

Answer 3

为所有虚假警报道歉。我发现了问题：我有另一个名为x的变量，并且由于另一个变量x是局部变量，因此onchange函数中的X引用引用了另一个全局x变量。我只是将局部x更改为全局变量k，并且所有引用也都是如此。这解决了这个问题。