-1

入力フィールドを別の入力フィールドにミラーリングしています。

この http://jsfiddle.net/bloodygeese/tQm8G/7/を見ると

ユーザーが表示領域に収まる限り多くの文字を入力できるようにする必要があります

例えば：

現在表示されている表示フィールドは、幅が 200px であるため 50 文字を許可しますが、ユーザーがボタンをクリックして幅が 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 に答える