如何使用輸入類型編號更改字體大小？

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