1

再びフレームワークに戻ります。要素の値を取得し、要素の値を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のような気がします>.>

4

1 に答える 1

0

これはIE関連の問題だと確信しています。IE 10 は、ユーザー フレンドリーであることを目指しており、ページを更新した後でも変更された入力テキストをテキストエリアに保持します。

問題は次のとおりです。スクリプトは、IE が以前のページ読み込みからテキストを復元する前に、テキスト領域をクリアしようとします。したがって、スクリプトは新しいテキストを古いテキストに追加します。

typeしたがって、簡単な回避策は、関数を開始してテキストエリアをクリアする前に、IE にテキストを復元するための少しの時間を与えることです。ただし、IE が上書きする前に、テキストエリアの元のコンテンツを取得する必要があります。

そして、あなたのコードを見ているときに気づいたことがあります。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");
于 2013-10-06T13:49:15.933 に答える