javascript - 将 JS 处理的值附加到要以表单发送的文本区域

Question

我目前正在开展一个学校项目，但遇到了一个不知道如何解决的问题。

我和我的团队正在开发一个食谱库，用户可以在其中上传自己的食谱。我希望用户分阶段上传菜谱本身。 类似的东西

1. 煮一些水。
2. 将鸡蛋放入沸水中
3. 煮 5-6 分钟。”

HTML:

<form action="handler.php" method="POST" enctype="multipart/form-data" name="recipe">
    <p><input type="text" name="name "placeholder="name"/></p>
    <p><div class="recipe_showing"></div></p>
    <textarea name="recipe_data"  class="recipe_data" style="display:none;"></textarea>
    <p><input type="text" class="recipe_part" placeholder="part of the recipe"/>
    <input type="button" class="recipe_enter" value="enter"/></p>
<more form tags and etc>

我知道 <p> 的过度使用标签，我们目前正在研究代码的功能，优化将是其次。

这是我们使用的js代码

$(document).ready(function() {
    var recipe_logg_count=0;
    $(".recipe_enter").click(function() {
        if ($('.recipe_part').val() == null) {
            alert('please write down the first part of the recipe');
        }
        else {
            recipe_logg_count++;
            $('.recipe_showing').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ '</br>');
            $('.recipe_data').append('<p>'+ recipe_logg_count + '. ' + $('.recipe_part').val()+'</p>');
        }
    });
});

我没有向用户显示文本区域的内容，我为此使用了单独的 div。 正如您所看到的，我试图简单地将从“recipe_part”获取的值附加到文本区域，但这不起作用。

我尝试删除 <p>我在开头附加的标签，然后看起来效果很好。但我需要 <p>用于在显示的页面上设置菜谱样式的标签。

有没有办法发送文本内容，即使里面有其他html标签？

Answer 1

jQuery 的 append 当应用于 textarea 时，似乎只是默默地忽略带有标签的文本。您可以使用 $('textarea') 来解决这个问题.text($('textarea').text() + ...) 相反，但是通常不鼓励用户提交 html 标签，因为如果不仔细清理，就会导致 XSS 攻击。