如何使用输入类型编号更改字体大小？

Question

上图显示了一个功能，用户可以选择自己喜欢的字体大小（这是所有年龄段的网站）。 但是，将其转移到代码上对我来说说起来容易做起来难。 我发现的是我必须使用以下方法：

<input type="number">

有谁知道如何使这种功能与将字体大小调整为所选数字的Javascript或jQuery一起使用？

非常感谢！

Answer 1

您可以在提交中提取输入的val()并使用.css()设置字体大小：

JS

$("input[type=submit]").click(function(){
    var fontSize = $("input[type=number]").val();
    $("p").css({"font-size":fontSize+"px"});
});

的HTML

<input type="number" placeholder="choose font-size"/>
<input type="submit"/>
<p>Hello</p>

按钮示例

要么

您可以在keyup或keydown事件（开始输入您的电话号码）上进行操作：

$("input[type=number]").keyup(function(){
    var fontSize = $(this).val();
    $("p").css({"font-size":fontSize+"px"});    
});

KEYUP示例

要么

要在单击向上箭头或向下箭头时更改值，可以使用.change()

$("input[type=number]").change(function(){
   var fontSize = $(this).val();
   $("p").css({"font-size":fontSize+"px"}); 
});

更改示例

Answer 2

这是您的问题的答案

的CSS

input[type=number] {
font-size: 31px;
}

Answer 3

您可以执行以下操作：

 <input type="text" class="inp">

 .inp { font-size:20px; }