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

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> 

BUTTON EXAMPLE

OR

你可以做一個keyup或​​事件（開始輸入你的號碼）：

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

KEYUP EXAMPLE

OR

要改變點擊up.down箭頭時的值，您可以使用.change()

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

CHANGE EXAMPLE

Answer 2

這是你的問題的答案

CSS

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

Answer 3

你可以做這樣的事情：

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

.inp { font-size:20px; }