3

我正在开发一个小型 Web 应用程序，作为其中的一部分，我需要通过用 Jeremy 和 Interface Designer 等实际值覆盖 %name% 和 %slogan% 等标识符来获得一个表单来编辑文本区域中的一些代码。

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

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

它必须用 jQuery 来完成。

让我知道你是否可以编码。

4

4 回答 4

1

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

$(document).ready(function() {
    $('#formId').submit(function() {
        $('textarea').each(function(index, element) {
           var textarea = $(element);
           textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
        });
    });
});
于 2013-03-02T12:54:23.097 回答
1

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

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

<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

于 2013-03-02T13:01:33.783 回答
0
  1. 不要使用表单提交，而是将提交按钮的 onclick 指向您的 javascript 函数
  2. 使用刚刚调用的函数验证输入字段
  3. 使用被调用的函数进行替换，如您的代码所示。
于 2013-03-02T12:53:52.857 回答
0

尝试执行 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'));
        });
   }); 
});
于 2013-03-02T12:55:32.213 回答