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");

小提琴

這是與IE相關的問題，還是我在代碼中缺少某些內容？ 我覺得可能是IE>。>

Answer 1

我很確定這是與IE相關的問題。 IE 10試圖變得用戶友好，即使在刷新頁面后，也將更改的輸入文本保留在textareas中。

現在是問題所在： 在 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");