我正在开发一个小型网络应用程序，作为其中的一部分，我需要一个表单来编辑文本区域中的一些代码，方法是使用 Jeremy 和 Interface 等实际值覆盖 %name% 和 %slogan% 等标识符设计师。
这是我目前得到的代码。它只是将加载时的所有值更改为指定的文本，但我希望它在用户提交表单并将文本输入到输入字段后更改它。
$(document).ready(function() {
$('textarea').each(function(index, element) {
var textarea = $(element);
textarea.val(textarea.val().replace(/%name%/, 'Victor Erixon'));
});
});
它必须使用 jQuery 完成。
如果您可以编码，请告诉我。
最佳答案
根据您在评论中提供的网站，我制作了适合您的需求和元素的脚本:
我建议设置 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);
});
});
无需定义 basicHtml :
您始终必须像这样编写文本区域的代码:(开始/结束 <html> 和 <textarea> 标记之间没有空格或制表符)
<textarea class="code" disabled="disabled"><html>
<!-- rest of the code -->
</html></textarea>
并将代码更改为:
$(document).ready(function(){
var basicHtml = ($('.code').html()).replace(/</g,'<').replace(/>/g,'>');
//rest of code
});
关于jquery - 使用表单编辑文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15174656/