-1

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

如果你看看这个 http://jsfiddle.net/bloodygeese/tQm8G/7/

我需要让用户输入与显示区域一样多的字符

例如：

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

因此，输入区域的长度始终相同，但显示区域的大小会改变，并且必须允许填充字符。

希望这一切都有意义吗？

4

1 回答 1

0

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

由于尚不清楚您希望它最终如何工作，因此目前仅在达到最大值时发出警报

演示：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});
于 2012-06-16T15:54:50.497 回答