2

サイトの 3 つの div に対して、このデモの「ContentEditable」を使用しようとしました。

http://html5demos.com/contenteditable

イベント リスナー用に、このデモから h5utils.js も読み込みます。

たとえば、div の 1 つは次のようになります。

<div class="statsWrapper">
    <header id="met30" contenteditable="true" class="Tester">
</header>
    <p class="statsmonth_tester">
       Tester Overall
    </p>
</div>

HTMLの私のスクリプト

        <script>
        //Script for saving Content Sales Report to local storage//

        var editableTester = document.getElementById('met30');
        var editableSubscriber = document.getElementById('met32');
        var editableReadOnly = document.getElementById('met35');

        addEvent(editableTester, 'blur', function() {
            localStorage.setItem('Tester', this.innerHTML);
            document.designMode = 'off';                
        });

        addEvent(editableSubscriber, 'blur', function() {
            localStorage.setItem('Subscriber', this.innerHTML);
            document.designMode = 'off';
        });

        addEvent(editableReadOnly, 'blur', function() {
            localStorage.setItem('ReadOnly', this.innerHTML);
            document.designMode = 'off';
        });

        addEvent(editableTester, 'focus', function() {
            document.designMode = 'on';
        });
        addEvent(editableSubscriber, 'focus', function() {
            document.designMode = 'on';
        });
        addEvent(editableReadOnly, 'focus', function() {
            document.designMode = 'on';
        });

        if (localStorage.getItem('Tester')) {
            editableTester.innerHTML = localStorage.getItem('Tester');
        }
        if (localStorage.getItem('Subscriber')) {
            editableSubscriber.innerHTML = localStorage.getItem('Subscriber');
        }
        if (localStorage.getItem('ReadOnly')) {
            editableReadOnly.innerHTML = localStorage.getItem('ReadOnly');
        }               
    </script>

問題は：

div はいつでも編集できますが、編集後に div の新しい値で localStorage が更新されないことがあります。ウィンドウをリロードすると、すべての値が古いものになります。しかし、それは奇妙です: 新しいウィンドウでコードを開くと、時々動作します。何か案は？（私の英語でごめんなさい）

4

1 に答える 1

0

DOM が完全にロードされた後にスクリプトを実行しますか? それを達成するための多くの方法。しかし、最も簡単なのはおそらくjQueryを使用することです(document).ready(//here comes your code)

于 2013-02-05T19:14:02.067 に答える