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

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

1 个答案: