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函数操作字段的字体大小。

＆＃13;

$(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!!!');
        }
    });

});

＆＃13;

<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" />

＆＃13;

以下是演示：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

OR，另一种方法是绑定keypress函数并检查输入值，如下所示：

$(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，然后更新所需的元素。这样，它会在用户更改值后立即更新。这是一个例子：

＆＃13;

$("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');
    }
});

＆＃13;

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

＆＃13;

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

3 个答案: