jQuery存储textarea的初始值

时间:2013-01-11 14:30:45

标签: jquery

在下面的脚本中,我想保持htmlStrTOCpre的初始值为静态,以便它不会改变。但是,一旦我编辑了文本区域,撤消将不再将原始文本粘贴回textarea。我相信它是因为htmlStrTOCpre基于调用undoTOC函数时textarea的html(),而不是页面加载时的初始值。

如何存储该初始值,以便我可以将其粘贴回textarea(通过undoTOC函数)?

<script>
jQuery(document).ready(function()
    {
        var pageurl = jQuery("#sample-permalink").text();
        var htmlStrTOCpre = jQuery("#cb2_customTOC").html();
        var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
        htmlStrTOC += '<ul>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
        htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
        htmlStrTOC += '</ul>';

        var checkTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOC);
        }

        jQuery("#cb-toc-click").bind("click", checkTOC);

        var undoTOC = function()
        {
            jQuery("#cb2_customTOC").html(htmlStrTOCpre);
        }

        jQuery("#cb-toc-undo").bind("click", undoTOC);

</script>

<div id="post_TOC" class="postbox ">
    <h3 class="hndle"><span>Table of Contents</span></h3>
    <div class="inside">
        <style>
        .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
        </style>
        <div class="inside">
            <textarea name="cb2_customTOC" id="cb2_customTOC">Some initial value</textarea>
            <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
        </div>
    </div>
</div>

<span id="sample-permalink">http://localhost:8888/test/</span>

2 个答案:

答案 0 :(得分:3)

在textarea上使用.val()代替.html()。然后将其存储在该文本区域的.data()中。

保存:

$('#id').data('oldvalue',$('#id').val());

检索和重置:

$('#id').val($('#id').data('oldvalue'));

http://api.jquery.com/data/

答案 1 :(得分:1)

在这里您可以找到我的解决方案:http://jsfiddle.net/EBqZy/,顺便说一下,我将更正您的代码。

jQuery(document).ready(function()
{
    var pageurl = jQuery("#sample-permalink").text();
    var htmlStrTOCpre = jQuery("#cb2_customTOC").text();

    var htmlStrTOC  = '<h3>Table of Contents</h3>\n';
    htmlStrTOC += '<ul>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'2/">Introduction&nbsp;</a></li>\n';
    htmlStrTOC += '    <li><a href="'+pageurl+'3/">Conclusion&nbsp;</a></li>\n';
    htmlStrTOC += '</ul>';

    var checkTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOC);
    }

    jQuery("#cb-toc-click").bind("click", checkTOC);

    var undoTOC = function()
    {
        jQuery("#cb2_customTOC").val(htmlStrTOCpre);
    }

    jQuery("#cb-toc-undo").bind("click", undoTOC);

})


<div id="post_TOC" class="postbox ">
<h3 class="hndle"><span>Table of Contents</span></h3>
<div class="inside">
    <style>
    .cb-toc{color:blue;text-decoration:underline;cursor:pointer;}
    </style>
    <div class="inside">
        <textarea name="cb2_customTOC" id="cb2_customTOC">Default text</textarea>
        <span class="cb-toc" id="cb-toc-click">Paste TOC</span> | <span class="cb-toc" id="cb-toc-undo">Undo</span></p>
    </div>
</div>

的http://本地主机:8888 /测试/