可變輸入字段長度的jquery字符限制

Question

我使用另一個輸入字段鏡像輸入字段。

如果你看看這個http://jsfiddle.net/bloodygeese/tQm8G/7/

我需要讓用戶輸入儘可能多的字符顯示區域可以採取

例如：

現在顯示在顯示器領域將允許說50個字符，因爲它是200px寬，但用戶可能會點擊一個按鈕，使它只有100px寬，那麼它只能容納25個字符？

因此，輸入區域將始終是相同的長度，但顯示區域將更改大小，並且必須允許填充字符。

希望這一切都有意義嗎？

Answer 1

概念很有趣，所以我創建了一個確定最大字母的插件函數。插件將屏幕外的測試跨度插入，然後不斷添加字母「O」，直到跨度寬度超過輸入寬度。您可以在選項中傳遞一個css對象映射來幫助提高測試寬度。延伸位插件需要添加你想要的是不是在原來的職位明確的功能

既然你想怎樣，目前還不清楚這最終去解決它目前只是拋出達到最大值時，警報

DEMO：http://jsfiddle.net/tQm8G/10/

$.fn.maxLetters = function(options) { 
    defaults = { 
     testLetter: 'O',// 
     widthBuffer: 30,// allows for some padding left/right 
     css: null, 
     events : 'keyup' // space seperated as in on() API 
    } 
    var $test_el = $('<div style="position:absolute; left:-999em"><span id="max_letter_test"></span></div>'); 
    var opts = $.extend({}, defaults, options); 
    return this.each(function() { 
     var $input = $(this); 

     $('body').prepend($test_el); 
     if(opts.css){ 
      $test_el.css(opts.css); 
     } 

     var maxW = $input.width() - opts.widthBuffer; 
     currW = 0, test_text = '', $test = $('#max_letter_test'), maxLetters = 0; 

     while (currW < maxW) { 
      test_text += opts.testLetter; 
      $test.text(test_text); 
      currW = $test.width(); 
      maxLetters++; 
     } 
     $test_el.remove(); 
     $input.data('max_letters', maxLetters).on(opts.events, function() { 
      var max = $(this).data('max_letters') 
      if ($(this).val().length >= max) { 
       alert('Max letters(' + max + ') reached') 
      } 
     }); 

    }); 
} 

例用途：

$('#inputarea').maxLetters({css:{fontSize: '20px'}}); 
$('#inputarea2').maxLetters({css:{fontSize: '20px'}, widthBuffer:0});