Question

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

我和我的小组正在开设食谱银行，用户可以上传自己的食谱。我希望用户分阶段上传配方。像

这样的东西

煮一些水。
将鸡蛋放入沸水中
煮沸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>');
        }
    });
});

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

我已尝试删除我在开头添加的<p>标记，这似乎工作正常。但我需要有<p>标签，用于在显示的页面上设置配方样式。

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

Answer 1

我不会在textarea中插入段落（不确定它是否可能）。相反，我会在mysql数据库中有2个表，一个名为＆＃34; recipes＆＃34;另一个名为＆＃34;步骤＆＃34;。每个配方都有一个自动增量ID，每个步骤都通过该ID连接到配方。当用户在步骤的每次提交中插入步骤时，我会进行ajax调用，将该步骤插入数据库，在用于配方预览并清空输入的此额外div中向用户显示该输入，以便用户可以开始插入下一步。

Answer 2

我认为你不能在textarea中追加文字。您应该能够使用val（）;

在textarea中附加文本

您可以尝试使用.val（）函数

var textData =  $('.recipe_data').val();
var textShowing =  $('.recipe_showing').val();
$('.recipe_data').val(textData + recipe_logg_count + '. ' + $('.recipe_part').val()+"\n\r");
$('.recipe_showing').val(textShowing + recipe_logg_count + '. ' + $('.recipe_part').val()+"\n\r");

或者使用js

var enterBtn = document.getElementById('recipe_enter');
var recipeData = document.getElementById('recipe-data');
var recipeShowing = document.getElementById('recipe-showing');
var recipeData_value = '';
var recipeShowing_value = '';
enterBtn.addEventListener('click', function(e){
    var rpart = document.getElementById('recipe_part').value;
    recipeData_value += recipe_log_count + '. ' + rpart + "\n\r";
    recipeShowing_value += recipe_logg_count + '. ' + rpart + "\n\r";
    recipeData.value = recipeData_value;
    recipeShowing.value = recipeShowing_value;
});

[JQuery的] 将以前的文本保存在函数范围之外的变量中，并附加到这些变量，然后将这些变量添加为值。

$(document).ready(function() {
var recipe_logg_count=0;

var recipe_data = '';
var recipe_showing = '';

$(".recipe_enter").click(function() {
    var recipe_part = $('.recipe_part').val();
    if (recipe_part == null) {
        alert('please write down the first part of the recipe');
    }
    else {
        recipe_logg_count++;
        recipe_data += recipe_logg_count + '. ' + recipe_part + "\n\r";
        recipe_showing += recipe_logg_count + '. ' + recipe_part +"\n\r";
        $('.recipe_data').val(recipe_data);
        $('.recipe_showing').val(recipe_showing);
    }
});

Answer 3

应用于append时，jQuery的textarea似乎只是默默地忽略带有标签的文字。您可以使用$('textarea').text($('textarea').text() + ...)来解决这个问题，但是允许用户提交html标签是无论如何，由于没有仔细的卫生设施，它会导致XSS攻击。

Answer 4

我现在测试了一些东西，并意识到我可以用php攻击这个问题。如果我喜欢这样：

"$('.recipe_data').append(recipe_logg_count + '. ' + $('.recipe_part').val()+ ':');"

这允许我追加值。在那之后，我可以轻松地做到

$recipe_parts = explode(':', $recipe_data);
foreach($recipe_parts as $part){
print "<p>".$part."<p/>";
}

将JS处理的值附加到textarea，以

4 个答案: