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

【问题标题】：Change font size according to user input using Jquery使用 Jquery 根据用户输入更改字体大小
【发布时间】：2015-04-25 03:50:10
【问题描述】：

我有以下代码：

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

允许用户在表单中输入字体大小，文本会根据用户输入的内容而改变，另外，如果用户输入的字体大小小于 10px，我希望在输入区域旁边出现警告，我怎么能用jquery做到这一点？我已经尝试了几件到目前为止还没有成功的事情

谢谢！

【问题讨论】：

为什么不把最小值设置为10，这样用户就不能低于了？
请展示您的尝试
Allow users to change font size in a webpage 的可能重复项
您想通过使用输入更改字体大小还是为小于 10 像素的字体添加警告？从提出问题的方式来看，您似乎已经具备更改字体大小的功能（这使标题令人困惑）。

标签： jquery css html forms font-size

【解决方案1】：

在您的输入元素上添加一个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>

【讨论】：

非常感谢！我试过了，它有效，但不会显示警告，如果字体大小小于 10，文本仍会更改为该字体大小，可以修复吗？
@mch 当然，如果文本大小大于 10（在 else 语句中），您只需更改文本大小。我将添加该更改，尽管我不明白您的意思是警告未显示。我在示例中收到警告。当您输入诸如“9”或“8”之类的值时，您是否没有收到文本“您的字体小于 10px”？
是的，当我在我的网站上运行它时，它并没有出现。我会尝试找出发生了什么，警告完美地出现在这里。感谢您的帮助！
@mch 确保您有一个 id 为 "warning" 的元素，如示例中所示：<span id="warning"></span>。
原来我的 id 有误！现在可以正常使用了，谢谢:)

【解决方案2】：

为了使用 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/

【讨论】：

这还不够好。为什么？因为如果您单击该框但未输入任何单击其他任何位置的值，您仍然会收到警报。这不是一个很好的模糊做法。

【解决方案3】：

当用户像这样点击输入时，您总是可以检查该值：

$(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

【讨论】：