使用表单编辑文本区域

Question

使用表单编辑文本区域

3

我正在开发一个小型Web应用程序，作为其中的一部分，我需要通过覆盖诸如％name％和％slogan％之类的标识符来在文本区域中编辑一些代码并用真实值（例如Jeremy和界面设计师）进行替换。

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

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

这必须使用jQuery完成。

如果您能编码，请告诉我。

- Jeremy Blazé

我会将正则表达式从 /%name%/ 更改为 /%name%/g，以替换所有匹配的标识符，而不仅仅是第一个。 - insertusernamehere

4个回答

1

基于您在评论中提供的网站，我调整了脚本以满足您的需求和元素：

我建议在最终代码文本区域上设置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

{{链接1：JSFIDDLE}}

无需定义`basicHtml`：

您始终需要像这样编写文本区域的代码：（在打开/关闭<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

的程序编程相关内容。

- SeinopSys

这是我在.js文件中需要的所有jQuery代码吗？因为它仍然无法工作:S - Jeremy Blazé

我应该使用哪个版本的jQuery？ - Jeremy Blazé

非常感谢！顶部的那个东西是什么？我只需要知道是否需要为我放入该字段的所有代码都这样做。最终，我将美化该字段并提供主题，而不是使用糟糕的旧基础代码。 - Jeremy Blazé

@JeremyBlazé 顶部的东西是默认的HTML代码，将被插入到文本框中，并在以后用于替换。您可以使用这个链接从您的新代码中创建字符串，以便在需要更新时使用。 - SeinopSys

实际上有一种方法，让我也为此做一个 Fiddle。 - SeinopSys

显示剩余11条评论

0

不要使用表单提交，而是将提交按钮的onclick指向您的JavaScript函数
使用刚刚调用的函数验证输入字段
使用调用的函数执行替换操作，就像您的代码所示。

- middelpat

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'));
        });
   }); 
});

- thaJeztah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adil · Accepted Answer

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

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

使用表单编辑文本区域

无需定义basicHtml：

无需定义`basicHtml`：