可变输入字段长度的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});