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

Question

The image above shows a function for a user to select his or her preferenced font size (it's a website for all ages). However, transferring this to code is easier said than done for me. All I found was that I had to use the following method:

<input type="number">

Is there anyone who knows how to make such a function work with Javascript or jQuery that adjusts the font size to the selected number?

Thanks so much in advance!

Answer 1

You can pull the val() of the input on a submission and set the font size using .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

You could do it on a keyup or keydown event (start typing your number):

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

KEYUP EXAMPLE

OR

To change the value when clicking the up.down arrows, you can use .change()

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

CHANGE EXAMPLE

Answer 2

This is the answer for your question

CSS

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

Answer 3

You can do something like this:

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

 .inp { font-size:20px; }