Question

我正在jquery中创建一个textarea字段。当我输入任何内容时文本区域，如果我更改字体系列和字体颜色和字体大小应该改变。

在我下面的代码中，当我写任何东西时文本区域并更改其更改的字体系列和字体颜色，但是当我尝试更改字体大小时，它不会改变。我有字体大小作为文本区域意味着无论我给大小它应该改变，但这个问题我无法解决。

请任何人帮我解决这个问题。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="padding-top:120px; padding-left:120px">

  <textarea rows="8" cols="50" class="changeMe" placeholder="Enter something"></textarea>

  <br><br>

  <form id="myform">

    <label>Select Font Family</label>
    <select id="ff">
      <option value="Arial">Arial</option>
      <option value="Verdana">Verdana </option>
      <option value="Times ">Times New Roman</option>
      <option value="Impact">Impact</option>
    </select><br><br>

    <label>Select Font size</label>
    <input type="text" id="size"><br><br>

    <label>Select color</label>
    <select id="color">
      <option value="orange" style="background-color: orange;">orange</option>
      <option value="red" style="background-color: red;">red</option>
      <option value="pink" style="background-color: pink;">pink</option>
      <option value="blue" style="background-color: blue;">blue</option>
    </select><br><br>

  </form>

</div>

Answer 1

你应该使用下面的代码来实现你想要的。此keyup函数将在每次按键事件时更改字体大小。

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

我希望这会对你有所帮助。

Answer 2

您可以使用fontsize的选项选项

代替输入

喜欢这个......

<select id="size">
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
</select>

或者如果您可以使用输入字段，则必须使用其他事件，例如点击。

Answer 3

你也可以试试这个......

仅供参考。

但值的影响会改变input box

的可见焦点变化

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

如何更改字体大小？

3 个答案: