如何使用javascript将默认输出文本设置为下拉菜单中的选定选项
我正在为我的网站创建一个自定义字体预览框。我是一个字体设计师,希望我的客户能够在购买前测试字体,我已经使用javascript、css和html尽可能简单地对其进行编码。整个过程都很顺利,但我有一个问题 这个盒子的工作原理如下: 顶部有一个文本区域,其中包含占位符文本 客户可以输入自己的文本 有一个字体下拉菜单,可以选择其中一种字体 通过html和文本框选择以更改字体大小 然后在这些下面,有一行输出,显示 占位符或客户键入的文本。 我遇到的问题是,我希望输出从一开始就以选定的字体显示,但它是以网站的默认字体显示的。在我取消选择并在下拉菜单中重新选择该字体之前,它不会更改为所选字体 我可以使用标记在html中设置,但这只会影响占位符文本。如果客户在框中键入任何内容,它会立即更改回默认字体,客户必须取消选择并在下拉列表中重新选择字体以更改输出。所以这很令人困惑 以下是JSBin链接: 以下是我使用的代码:如何使用javascript将默认输出文本设置为下拉菜单中的选定选项,javascript,jquery,html,css,fonts,Javascript,Jquery,Html,Css,Fonts,我正在为我的网站创建一个自定义字体预览框。我是一个字体设计师,希望我的客户能够在购买前测试字体,我已经使用javascript、css和html尽可能简单地对其进行编码。整个过程都很顺利,但我有一个问题 这个盒子的工作原理如下: 顶部有一个文本区域,其中包含占位符文本 客户可以输入自己的文本 有一个字体下拉菜单,可以选择其中一种字体 通过html和文本框选择以更改字体大小 然后在这些下面,有一行输出,显示 占位符或客户键入的文本。 我遇到的问题是,我希望输出从一开始就以选定的字体显示,但它是以网
<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>
和javascript使用:
您只需在DOM就绪事件中设置所选字体,操作如下:
$('.font-preview').css('fontFamily', $("#customFont").val());
请参阅下面的工作代码
$document.ready=>{
$'.font预览'.css'fontFamily',$customFont.val;
$'customText'。在'keyup'上,事件=>{
$'.font preview'.html$event.currentTarget.val;
};
$'customFont'。在'change'上,事件=>{
$'.font preview'.css'fontFamily',$event.currentTarget.val;
};
$'customSize'。在'keyup'上,事件=>{
var fontSize=$event.currentTarget.val+'px';
$'.font预览'.css'fontSize',fontSize;
};
}
@字体{
字体系列:“平面规则字体”;
src:urlhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be111ff9ed15ac0b5f31/1578417681898/Flatline-Regular.otf,urlfontURL。woffhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be2a1ff9ed15ac0b6230/1578417707009/flatline-regular-webfont.woff,urlfontURL.woff2https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be31e375184c7b041567/1578417713132/flatline-regular-webfont.woff2;
}
试驾这种字体
字号
选择字体
平面规则
Arial
敏捷的棕色狐狸跳过了懒狗。
添加$'.font预览'.css'fontFamily',$'customFont'.val;略低于$document.ready=>{
所以像这样:
$document.ready=>{
$'.font preview'.css'fontFamily',$'customFont'.val;
$'customText'。在'keyup'上,事件=>{
$'.font preview'.html$event.currentTarget.val;
};
$'customFont'。在'change'上,事件=>{
$'.font preview'.css'fontFamily',$event.currentTarget.val;
};
$'customSize'。在'keyup'上,事件=>{
var fontSize=$event.currentTarget.val+'px';
$'.font预览'.css'fontSize',fontSize;
};
}
@字体{
字体系列:“平面规则字体”;
src:urlhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be111ff9ed15ac0b5f31/1578417681898/Flatline-Regular.otf,urlfontURL。woffhttps://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be2a1ff9ed15ac0b6230/1578417707009/flatline-regular-webfont.woff,urlfontURL.woff2https://static1.squarespace.com/static/5579e750e4b06072e5c3004a/t/5e14be31e375184c7b041567/1578417713132/flatline-regular-webfont.woff2;
}
JS-Bin
试驾这种字体
字号
选择字体
平面规则
Arial
敏捷的棕色狐狸跳过了懒狗。
$(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);
});
})
$('.font-preview').css('fontFamily', $("#customFont").val());