Как установить вывод текста по умолчанию для выбранной опции из выпадающего меню, используя javascript

Question

Я создаю окно предварительного просмотра шрифтов для своего веб-сайта (я дизайнер шрифтов и хотел бы, чтобы мои клиенты могли тестировать шрифты перед покупкой), и я все это закодировал как можно проще, используя javascript, css и html. Все это работает, но у меня есть одна проблема.

Окно работает следующим образом:

• вверху текстовая область с заполнителем, где клиент может ввести свой или ее собственный текст
• есть раскрывающееся меню шрифтов для выбора (один из них «выбирается» через html) и текстовое поле для изменения размера шрифта
• , затем ниже тех , есть строка вывода, которая отображает либо заполнитель, либо текст, введенный клиентом.

Проблема, с которой я столкнулся, заключается в том, что я хочу, чтобы вывод отображался шрифтом «выбранный» справа от начало, но вместо этого оно отображается шрифтом по умолчанию на сайте. Он не изменится на выбранный шрифт, пока я не выберу и повторно не выберу этот шрифт в раскрывающемся меню.

Я могу установить его в html, используя тег, но это влияет только на заполнитель текст. Если клиент вводит что-либо в поле, он сразу же возвращается к шрифту по умолчанию, и клиент должен отменить выбор и повторно выбрать шрифт в раскрывающемся списке, чтобы изменить вывод. Так что это довольно запутанно.

Вот ссылка на JSBin: https://jsbin.com/lenutufibu/2/edit?html, css, js, вывод

Вот код, который я использовал:

<h2>Test-Drive This Font</h2>
<div class="fontForm">
<form method="POST">

    <textarea name="customText" placeholder="Type your own text here and it will preview below." id="customText" cols="80" rows="1"></textarea>


  <div class="font-third">
    Font Size  
    <br>
    <input type="text" placeholder="24" id="customSize">
  </div>
  <div class="font-third">
    Select Font <select name="customFont" id="customFont">
      <option value="flatline-regular" id="flatline-regular" selected>Flatline Regular</option>
      <option value="arial" id="arial">Arial</option>
    </select>
  </div>
</form>

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

А затем CSS только для шрифта, использованного в моем примере :

@font-face {   
font-family: 'flatline-regular';   
src: url(https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be111ff9ed15ac0b5f31/1578417681898/Flatline-Regular.otf), url(fontURL.woffhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be2a1ff9ed15ac0b6230/1578417707009/flatline-regular-webfont.woff), url(fontURL.woff2https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be31e375184c7b041567/1578417713132/flatline-regular-webfont.woff2); 
}

и javascript (с использованием https://code.jquery.com/jquery-3.1.0.js):

  $(document).ready(() => {

  $('#customText').on('keyup', event => {
    $('.font-preview').html($(event.currentTarget).val());
  });

  $('#customFont').on('change', event => {
    $('.font-preview').css('fontFamily', $(event.currentTarget).val());
  });

  $('#customSize').on('keyup', event => {
    var fontSize = ($(event.currentTarget).val()) + 'px';
    $('.font-preview').css('fontSize', fontSize);
  });

})

Answer 1

Вам просто нужно установить выбранный шрифт в событии DOM ready, что можно сделать следующим образом:

$('.font-preview').css('fontFamily', $("#customFont").val());

См. Рабочий код ниже

$(document).ready(() => {
  $('.font-preview').css('fontFamily', $("#customFont").val());
  $('#customText').on('keyup', event => {
    $('.font-preview').html($(event.currentTarget).val());
  });

  $('#customFont').on('change', event => {
    $('.font-preview').css('fontFamily', $(event.currentTarget).val());
  });

  $('#customSize').on('keyup', event => {
    var fontSize = ($(event.currentTarget).val()) + 'px';
    $('.font-preview').css('fontSize', fontSize);
  });
})

@font-face {
  font-family: 'flatline-regular';
  src: url(https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be111ff9ed15ac0b5f31/1578417681898/Flatline-Regular.otf), url(fontURL.woffhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be2a1ff9ed15ac0b6230/1578417707009/flatline-regular-webfont.woff), url(fontURL.woff2https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be31e375184c7b041567/1578417713132/flatline-regular-webfont.woff2);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="font-box-container">

  <h2>Test-Drive This Font</h2>
  <div class="fontForm">
    <form method="POST">

      <textarea name="customText" placeholder="Type your own text here and it will preview below." id="customText" cols="80" rows="1"></textarea>


      <div class="font-third">
        Font Size
        <br>
        <input type="text" placeholder="24" id="customSize">
      </div>
      <div class="font-third">
        Select Font
        <select name="customFont" id="customFont">
          <option value="flatline-regular" id="flatline-regular" selected>Flatline Regular</option>
          <option value="arial" id="arial">Arial</option>
        </select>
      </div>
    </form>
  </div>
  <div class="font-preview">The quick brown fox jumps over the lazy dog.</div>

</div>

Answer 2

Добавить $('.font-preview').css('fontFamily', $('#customFont').val()); чуть ниже $(document).ready(() => {.

Вот так:

  $(document).ready(() => {
    $('.font-preview').css('fontFamily', $('#customFont').val());
    
  $('#customText').on('keyup', event => {
    $('.font-preview').html($(event.currentTarget).val());
  });
  
  $('#customFont').on('change', event => {
    $('.font-preview').css('fontFamily', $(event.currentTarget).val());
  });
  
  $('#customSize').on('keyup', event => {
    var fontSize = ($(event.currentTarget).val()) + 'px';
    $('.font-preview').css('fontSize', fontSize);
  });
  
})

@font-face {   
font-family: 'flatline-regular';   
src: url(https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be111ff9ed15ac0b5f31/1578417681898/Flatline-Regular.otf), url(fontURL.woffhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be2a1ff9ed15ac0b6230/1578417707009/flatline-regular-webfont.woff), url(fontURL.woff2https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be31e375184c7b041567/1578417713132/flatline-regular-webfont.woff2); 
}

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="custom-font-previewer">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>

  <div class = "font-box-container">

    <h2>Test-Drive This Font</h2>
    <div class="fontForm">
    <form method="POST">

        <textarea name="customText" placeholder="Type your own text here and it will preview below." id="customText" cols="80" rows="1"></textarea>
      
      
      <div class="font-third">
        Font Size  
        <br>
        <input type="text" placeholder="24" id="customSize">
      </div>
      <div class="font-third">
        Select Font <select name="customFont" id="customFont">
          <option value="flatline-regular" id="flatline-regular" selected>Flatline Regular</option>
          <option value="arial" id="arial">Arial</option>
        </select>
      </div>
    </form>
  </div>
    <div class="font-preview">The quick brown fox jumps over the lazy dog.</div>

  </div>
  
</body>
</html>