具有可变输入字段长度的Jquery字符限制

我正在用另一个输入字段镜像一个输入字段

如果你看看这个

我需要让用户输入尽可能多的字符显示区域可以采取

例如：

现在显示的显示字段将允许50个字符，因为它是200px宽，但用户可能会单击一个按钮，使其仅为100px宽，因此它只能容纳25个字符

因此，输入区域的长度将始终相同，但显示区域的大小将发生变化，并且必须允许使用字符填充

---

希望这一切都有意义

这个概念很有趣，所以我创建了一个插件函数来确定最大字母数。插件在屏幕外插入一个测试范围，然后不断添加字母“O”，直到范围宽度超过输入宽度。您可以在选项中传递css对象映射，以帮助提高测试宽度。插件需要扩展一点，以添加您想要的功能，这在原始帖子中是不清楚的

由于目前还不清楚您希望它最终如何工作，所以它目前只是在达到最大值时发出警报

演示：

---

我不明白这个问题，但是，增加面积的大小，以便您可以尝试：var totChar，len，charW$（“#inputarea”）.bind（'keyup keypress blur'，function（）{$（'#displayarea'）.val（$（this.val（））；charW=$（this.css（'font-size'）.replace（'px'，''）；totChar=$（this.val（）.length+1；len=$（this.width（）；if（len<（totChar*charW））{$（this.displayarea'）.animate（'width'：'++charW+'px'，0）}）；这是一个想法我不知道你是怎么理解我的问题的，因为我今天早上重读了它，它把我弄糊涂了！但你的解决方案绝对完美，正是我所需要的！！！谢谢你。。有没有什么方法可以代替一个警告，我可以只显示表单中的“已达到最大字符数”，它也会停止键入功能？我在输入了允许的字符数后添加了文本。我今天没有时间做更多的其他事情。在粘贴之类的事件中，问题变得更加棘手，我真的不太确定当达到限制时您想要做什么

$.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});