时间戳

首页 > 解决方案 > 如何使用javascript从下拉菜单中将默认输出文本设置为选定的选项

javascript - 如何使用javascript从下拉菜单中将默认输出文本设置为选定的选项

问题描述

我正在为我的网站创建一个自定义字体预览框（我是一名字体设计师，希望我的客户能够在购买前试用字体）并且我已经使用 javascript、css 和html。整个事情都有效，但我遇到了一个问题。

该框的工作原理如下：

我遇到的问题是我希望输出从一开始就以“选定”字体显示，而是以网站的默认字体显示。在我取消选择并在下拉菜单中重新选择该字体之前，它不会更改为所选字体。

我可以使用标签在 html 中设置它，但这只会影响占位符文本。如果客户在框中键入任何内容，它会立即更改回默认字体，并且客户必须取消选择并重新选择下拉菜单中的字体以更改输出。所以这很令人困惑。

这是 JSBin 链接：https ://jsbin.com/lenutufibu/2/edit?html,css,js,output

这是我使用的代码：

<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);
  });

})

标签： javascriptjqueryhtmlcssfonts

解决方案

您只需要在 DOM 就绪事件中设置选定的字体，可以这样完成：

$('.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>

推荐阅读