Question

我正在开发一个小型网络应用程序，作为其中的一部分，我需要通过覆盖像％name％和％slogan％这样的标识符来获取表单来编辑文本区域中的某些代码，例如Jeremy和Interface等实际值设计器。

这是我目前获得的代码。它只是将加载时的所有值更改为指定的文本，但我希望它在用户提交表单并在输入字段中输入文本后更改它。

$(document).ready(function() {
    $('textarea').each(function(index, element) {
       var textarea = $(element);
       textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
    });
});

必须使用jQuery完成。

如果您可以编码，请告诉我。

Answer 1

使用表单submit事件而不是document.ready

$(document).ready(function() {
    $('#formId').submit(function() {
        $('textarea').each(function(index, element) {
           var textarea = $(element);
           textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
        });
    });
});

Answer 2

根据您在评论中提供的网站，我使脚本符合您的需求和要素：

我建议在最终代码textarea上设置disabled="disabled"，以便用户可以选择，但无法编辑内容

<form method="get">
    <label for="name">Name: <input type="text" id="name" placeholder="Victor Erixon"/></label><br/>
    <label for="slogan">Slogan: <input type="text" id="slogan" placeholder="Interface Designer"/></label><br/>
    <label for="bio">Bio: </label><br>
    <textarea id="bio" placeholder="Write something about yourself"></textarea><br/>
    <label for="favicon">Favicon: <input type="text" id="favicon" placeholder="http://www.gravatar.com/avatar/b20f810469b0.png"/></label><br/>
    <label for="dribble">Dribble: <input type="text" id="dribble" placeholder="victorerixon"/></label><br/>
    <textarea class="code" disabled="disabled"></textarea><br/>
    <input type="submit" value="Submit"/>
</form>

var basicHtml = '<html>\n   <head>\n        <title>%name%</title>\n     <meta name="description" content="%bio%">\n     <link rel="icon" href="%favicon%">\n    </head>\n   <body>\n        <h1>%name%</h1>\n       <h2>%slogan%</h2>\n     <ul id="portfolio">%dribbble%</ul>\n        <p class="about">%bio%</p>\n    </body>\n</html>';

$(document).ready(function(){
    $('.code').val(basicHtml);

    $('form').on('submit',function() {
        var content = basicHtml;
        content = content.replace(/%name%/g, ($('#name').val()||$('#name').attr('placeholder')));
        content = content.replace(/%slogan%/g, ($('#slogan').val()||$('#slogan').attr('placeholder')));
        content = content.replace(/%bio%/g, ($('#bio').val()||$('#bio').attr('placeholder')));
        content = content.replace(/%favicon%/g, ($('#favicon').val()||$('#favicon').attr('placeholder')));
        var final = content.replace(/%dribble%/g, ($('#dribble').val()||$('#dribble').attr('placeholder')));
        $('.code').val(final);

        return false;
    }).on('reset',function(){
        $('form textarea:not(.code),form input').val();
        $('.code').val(basicHtml);
    });
});

JSFIDDLE

无需定义`basicHtml`：

您将始终必须编写textarea的代码，如下所示：（在开始/结束<html>和<textarea>标签之间没有空格或标签）

<textarea class="code" disabled="disabled"><html>
    <!-- rest of the code -->
</html></textarea>

并将代码更改为：

$(document).ready(function(){
    var basicHtml = ($('.code').html()).replace(/&lt;/g,'<').replace(/&gt;/g,'>');

    //rest of code
});

JSFIDDLE

Answer 3

不要使用表单提交，而是将提交按钮的onclick指向您的javascript函数
使用刚刚调用的函数
使用被调用的函数进行替换，如代码所示。

Answer 4

尝试执行form.submit事件中的代码;

$(document).ready(function() {
   $('form').on('submit', function() {
        $('textarea').each(function(index, element) {
            var textarea = $(element);
            textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
        });
   }); 
});

使用表单编辑文本区域

4 个答案:

无需定义`basicHtml`：

使用表单编辑文本区域

4 个答案:

无需定义basicHtml：

无需定义`basicHtml`：