textarea样式未提交

Question

我创建了一个textarea编辑器，没有使用任何插件，只有font-family，font-size和font-color的选择字段。

工作正常，但事实是，我改变了所有效果会发生什么？

如果我点击提交，它应该保存在数据库中，如：<p style="text-align: center;"><strong>Chethan K</strong></p>，但这不会发生。任何人都可以帮助我吗？

我的代码是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="<?php echo site_url('Maincntrl/texta'); ?>">
  <select id="clr">
    <option>-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select id="fs">
    <option>-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select id="size">
    <option>-Size-</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <p class="changeMe" name="texta"> </p>
  <div id="btns" style="text-align: center ; ">
    <button type="submit" class="btn btn-info">Save</button>
  </div>
</form>
<script>
  $("#fs").change(function() {
    //alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());
  });

  $("#size").change(function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
  });

  $("#clr").change(function() {
    $('.changeMe').css("color", $(this).val());
  });
</script>

Answer 1

这里的问题是你在函数中使用.css() ......

.css()在元素上添加样式，但它不会在内添加任何内容。

这是一个片段，当我点击保存按钮时我添加了一个安慰：

$("#fs").change(function() {
  $('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
  $('.changeMe').css("font-size", $(this).val() + "px");
});
$("#clr").change(function() {
  $('.changeMe').css("color", $(this).val());
});

// TAKIT: Added this for testing purpose
$("#myform").submit(function(event) {
  event.preventDefault();
  console.log("Value of textarea:\n  '" + $("textarea[name=texta]").val() + "'");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="#">
  <select id="clr">
    <option>-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select id="fs">
    <option>-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select id="size">
    <option>-Size-</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <p class="changeMe" name="texta"> </p>
  <!--div id="btns" style="text-align: center ; "-->
    <button type="submit" class="btn btn-info">Save</button>
  <!--/div-->
</form>

⋅ ⋅ ⋅

现在，我想我理解您使用<p class="changeMe" name="texta"> </p>的原因 但问题是你有两倍name="texta"。

我做了以下修改：

• 由于您只能发布表单元素的值，因此我将p更改为input。您可以使用type=hidden，但我使用了disabled，以便我们可以看到它的价值。
• 在class="selector"上添加了select和“prop”属性，以简化您的代码。
• 为默认选项添加了value=""。

以下是最后一段摘录：

$(".selector").change(function() {
  // Apply each select on the textarea
  $(".selector").each(function(i, elm) {
    $('.changeMe').css($(elm).attr('prop'), $(elm).val());
  });
  // Copy style of the textarea in our input using a span element
  $("[name=textstyle]").val($('.changeMe').attr('style'));
});

// TAKIT: Added this for testing purpose
$("#myform").submit(function(event) {
  event.preventDefault();
  console.log("Submitted:");
  console.log("  textstyle: '" + $("[name=textstyle]").val() + "'");
  console.log("  texta: '" + $("[name=texta]").val() + "'");
});

textarea {
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="#">
  <select class="selector" prop="color">
    <option value="">-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select class="selector" prop="font-family">
    <option value="">-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select class="selector" prop="font-size">
    <option value="">-Size-</option>
    <option value="5px">5</option>
    <option value="10px">10</option>
    <option value="15px">15</option>
    <option value="20px">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <!-- I propose you the following here: -->
  <br><input name="textstyle" disabled />
  <!--div id="btns" style="text-align: center ; "-->
  <button type="submit" class="btn btn-info">Save</button>
  <!--/div-->
</form>

然后，在服务器端，你得到两个name并做你的东西。

希望它有所帮助。