变化根据使用jQuery

-2

用户输入的字体大小我有以下代码：变化根据使用jQuery

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

，它允许用户输入的字体大小到表单和文本将按照什么样的用户将在改变，此外，我想要一个警告出现在输入区域旁边，如果用户输入的字体大小小于10px，我怎么能使用jQuery来做到这一点？我尝试了几件迄今为止尚未成功的事情

谢谢！

来源

2015-02-23 mch

为什么不设置最低值10，以使用户不能走下面？ – Alin 2015-02-23 18:04:18

请显示您的尝试 – charlietfl 2015-02-23 18:04:21

[允许用户更改网页中的字体大小]的可能重复（http://stackoverflow.com/questions/891980/allow-users-to-change-font-size-in-a-网页） – stuartd 2015-02-23 18:04:35

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

来源

2015-02-23 18:22:08

非常感谢！我试过这个，它的工作，但警告不会显示，如果字体大小小于10的文字仍然会改变为该字体大小，这可以解决吗？ – mch 2015-02-23 19:09:08

@mch当然，如果它大于10（在else语句中），您只需更改文本大小。我会补充说，尽管我没有看到你的意思是警告没有显示。我在示例中收到警告。当您输入“9”或“8”等值时，您没有收到文字*“您的字体小于10像素”吗？ – 2015-02-23 19:21:05

是的，当我在我的网站上运行它时，它不会出现。我会试着找出发生了什么，警告完美地出现在这里。谢谢你的帮助！ – mch 2015-02-23 19:33:35

为了做到这一点与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/

来源

2015-02-23 18:10:25 Duane

这不够好。为什么？因为如果您点击该框但没有输入任何其他地方点击的值，您仍会收到警报。这不是模糊的好习惯。 – Alin 2015-02-23 18:12:11

添加了错误检查，谢谢QA。 – Duane 2015-02-23 18:15:06

你总是可以检查该值时，在这样的输入用户点击：

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

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

这里是一个jsfiddle

OR，这样做的另一种方式，对绑定的按键功能，并为您的输入值，就像这样：

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

另一个jsfiddle

来源

2015-02-23 18:18:58 Alin

变化根据使用jQuery

回答

相关问题