IE 不会清除 textarea 值

Question

再次回到我的框架。我有一个方法可以获取元素的值，清除 dom 中元素的值，然后一个字母一个字母地放回去。在 Chome、FF 和 IE (10) 中对其进行了测试。一切正常。但是IE有个小问题。如果我在脚本执行时刷新页面，它不会清除元素的值。或者在它之后，并没有真正的不同。

<textarea cols="60" id="textarea">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas suscipit lacus non hendrerit cursus.
</textarea>

<script>
(function(){
    (this[arguments[0]] = function selector(id){
        if(!(this instanceof selector)) {
            return new selector(id);
        }
        this.elm = document.getElementById(id);
    }).prototype = {
        type:       function(delay) {
                        var elm = this.elm;
                        var status;
                        if ('value' in elm) {
                                var text = elm.value;
                                elm.value = "";
                                status = 0;
                            } else if ('innerHTML' in elm)  {
                                var text = elm.innerHTML;
                                elm.innerHTML = "";
                                status = 1;
                            }
                        var letters = text.split("");
                        var counter = 0;
                        function write() {
                            if (counter < letters.length) {
                                switch (status) {
                                    case 0: elm.value += letters[counter];      break;
                                    case 1: elm.innerHTML += letters[counter];  break;
                                }
                            }
                            counter += 1;
                        }
                        setInterval(write, delay);
                    },
   };
})('$');

$('textarea').type("100");

FIDDLE

这是与 IE 相关的问题还是我在代码中遗漏了什么？我觉得可能是IE>.>

Answer 1

我很确定这是与 IE 相关的问题。 IE 10 尝试对用户友好，即使在页面刷新后也会在 textareas 中保留更改的输入文本。

现在的问题是：您的脚本在 IE 恢复上一页加载的文本之前已经尝试清除文本区域。因此，您的脚本会将新文本添加到旧文本中。

所以一个简单的解决方法是在启动typefunction 并清除 textarea 之前给 IE 一点时间来恢复文本。但是，您必须在 IE 覆盖之前获取 textarea 的原始内容。

我在查看您的代码时注意到的一件事：使用setInterval 来实现这种效果是个坏主意，因为即使在将完整文本写入文本区域之后，该函数仍将永远运行（并计数）；你必须使用clearInterval。

这是更正的代码（更改已注释）。这适用于我在 FF、IE 10 和 Chrome 中。

(function(){
    (this[arguments[0]] = function selector(id){
        if(!(this instanceof selector)) {
            return new selector(id);
        }
        this.elm = document.getElementById(id);
        this.elm.setAttribute("autocomplete", "off");
    }).prototype = {
        type: function(delay) {
            var elm = this.elm;
            var status;
            // Don't clear textarea here, won't have any effect; but get original textarea content
            if ('value' in elm) {
                var text = elm.value;
                status = 0;
            }
            else if ('innerHTML' in elm)  {
                var text = elm.innerHTML;
                status = 1;
            }
            var letters = text.split("");
            var counter = 0;
            var interval;
            function write() {
                if (counter < letters.length) {
                    switch (status) {
                        case 0: elm.value += letters[counter];      break;
                        case 1: elm.innerHTML += letters[counter];  break;
                    }
                }
                else {
                    // Clear timer
                    clearInterval(interval);
                }
                counter += 1;
            }
            setTimeout(function(){
                // Clear textarea after waiting a little; using 0 as timeout value should be perfect, no need for higher values
                if (status == 0) {
                    elm.value = "";
                }
                else {
                    elm.innerHTML = "";
                }
                interval = setInterval(write, delay);
            }, 0);
        },
    };
})('$');

$('textarea').type("100");