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＆gt;。＆gt;

Answer 1

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

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

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

我看到你的代码时注意到了一些事情：使用setInterval这个效果是一个坏主意，因为即使在将完整的文本写入textarea之后，该函数仍将继续运行（和计数）;你必须使用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");

IE不会清除textarea值

1 个答案: