2

我尝试将此演示中的“ContentEditable”用于我网站的 3 个 div：

http://html5demos.com/contenteditable

我还从这个演示中为事件监听器加载了 h5utils.js

例如，其中一个 div 如下所示：

<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 但有时 localStorage 在编辑它们后不会用我的 div 的新值进行更新。重新加载窗口后，所有值都是旧值。但这很奇怪：有时它可以工作，如果我在新窗口中打开代码。有任何想法吗？（对不起我的英语不好）

4

1 回答 1

0

您是否在 DOM 完全加载后运行脚本？实现这一目标的许多方法。但最简单的可能是使用 jQuery(document).ready(//here comes your code)

于 2013-02-05T19:14:02.067 回答