變化根據使用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

回答

相關問題