Tworzę pola Textlay w jQuery. Kiedy wprowadzam cokolwiek w tym obszarze tekstowym, a jeśli zmienam rodzinę czcionki i koloru czcionki i rozmiar czcionki powinien się zmienić.

W poniższym kodzie, kiedy piszę rzecz w obszarze tekstowym i zmienić rodzinę czcionki i koloru czcionki, które się zmieniają, ale kiedy próbuję zmienić rozmiar czcionki, nie jest zmieniony. Mam rozmiar czcionki, ponieważ obszar tekstowy oznacza wszystko, co daje, powinno się zmienić, ale ten problem nie jestem w stanie rozwiązać.

Czy ktoś może mi pomóc rozwiązać to proszę.

$("#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>
-1
keerthi patil 4 czerwiec 2018, 16:03

3 odpowiedzi

Najlepsza odpowiedź

Masz użyć poniżej kodu, aby osiągnąć to, co chcesz. Ta funkcja klucza zmieni rozmiar czcionki na każdym wydarzeniu klawiszy.

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

Mam nadzieję, że to Ci pomoże.

5
Bhumi Patel 4 czerwiec 2018, 13:18

Możesz także spróbować ...

Tylko w celach informacyjnych.

Ale efekt zmiana wartości widoczna koncentracja zmienia się z input box

$("#size").on('change',function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
});
0
Er. Amit Joshi 4 czerwiec 2018, 13:43

Zamiast wejścia można użyć Wybierz opcję dla Fontsyze

Lubię to...

<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>

Albo jeśli możesz użyć pola wejściowego, musisz użyć innego zdarzenia, takiego jak kliknięcie.

0
Er. Amit Joshi 4 czerwiec 2018, 13:46