使用 Jquery 根据用户输入更改字体大小

Question

我有以下代码：

<div id="font">
            <h2>Font Size</h2>
            <input type="text" name="font" value="15" /> px
            <br /><span id="warning"></span>
        </div>

允许用户在表单中输入字体大小，文本会根据用户输入的内容而变化，另外，如果用户输入小于 10px 的字体大小，我希望在输入区域旁边出现警告，我如何使用 jquery 来做到这一点？试过好几样东西，目前都没有成功

谢谢！

Answer 1

为了使用 jQuery 执行此操作，您应该在输入字段上构建一个类似于以下内容的更改处理程序。然后使用 css 函数操作字段的字体大小。

$(document).ready(function(){
    $('#fontInput').change(function(){
        if ( !$(this).val() ) {
            return;
        }
        $('.fontChanger').css('font-size', $(this).val() + 'px');
        
        if ($(this).val() < 10) {
            alert('Font too small!!!');
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<p class="fontChanger">This is my text</p>

<p class="fontChanger">2ndary Text</p>

<p class="fontChanger">Woooo</p>

<p>Enter the new Font Size!</p>
<input type="text" id="fontInput" />

这是一个演示：http://jsfiddle.net/6e11t4b7/3/

Answer 2

您始终可以在用户点击输入时检查值，如下所示：

$(document).ready(function () {
    $('input').click(function () {
        var fontsize = $('input').val();

        if (fontsize < 10) {
            alert('Font too small!!!');
        }
    });
});

这是一个jsfiddle

或者，另一种方法是绑定按键功能并检查输入值，如下所示：

$(document).ready(function () {
    $('input').bind('keypress', function (e) {
        var fontsize = $('input').val();
        if (e.keyCode == 13) {
            if (fontsize < 10) {
                alert('Font too small!!!');
            }
        }
    });
});

另一个jsfiddle

Answer 3

在您的输入元素上添加一个 keyup 处理程序，当该事件触发时检查该值是否小于 10，然后更新您想要的元素。这样它会在用户更改值后立即更新。这是一个例子：

$("input").keyup(function(){
    if( parseInt($(this).val()) < 10 ) {
        $("#warning").text("Your font is smaller than 10px");
    } else {
        $("#warning").text("");
        $('#testFont').css('font-size', $(this).val() + 'px');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="font">
            <h2>Font Size</h2>
            <input type="text" name="font" value="15" /> px
            <br /><span id="warning"></span>
        </div>
<br />
<div id="testFont">Hello World</div>

使用 Jquery 根据用户输入更改字体大小

Change font size according to user input using Jquery

html

css

forms

jquery

font-size