Question

在页面上有多个文本区域。这个数字动态不固定。我需要限制一页上所有文本区域的长度。我怎么能在js或jquery中这样做？

我的尝试： -

<body>
        <div id="contact">
            <form action="" method="post">
                <fieldset>
                    <table style="width: 100%;">
                        <tr class="questionsView" style="width: 100%;margin: 5px;">
                            <td class="mandatory">
                                <b>1&nbsp;
                                    *Qywerew we</b>
                                <hr/>
                                <table class="profileTable" style="margin-left: 25px;">
                                    <tr>
                                        <td>
                                            <textarea style="border: solid 1px #800000;" rows="5" name="165" cols="100">
                                            </textarea>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;
                            </td>
                        </tr>
                        <tr class="questionsView" style="width: 100%;margin: 5px;">
                            <td class="">
                                <b>2&nbsp;
                                    a da da da</b>
                                <hr/>
                                <table class="profileTable" style="margin-left: 25px;">
                                    <tr>
                                        <td>
                                            <textarea style="border: solid 1px #800000;" rows="5" name="166" cols="100">
                                            </textarea>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                    <input type="submit" value="Submit" onclick="return checkThis()">
                </fieldset>
            </form>
        </div>
        <script>
            $('textarea').bind('paste keyup blur', function(){
                $(this).val(function(i, val){
                    return val.substr(0, 5);
                });
            });
        </script>
    </body>

Answer 1

$('textarea').bind('paste keyup blur', function() {
    $(this).val(function(i, val) {
        return val.substr(0, 5);
    });
});

jsFiddle

更新

我不知道为什么，但每次都在文本区域打印function(i, val) { return val.substr(0, 5); }。

听起来你正在使用旧版本的jQuery（pre 1.4）。下面重构的代码可以使用。

$('textarea').bind('paste keyup blur', function() {
    $(this).val(this.value.substr(0, 5));
});

jsFiddle

之前的代码在jQuery 1.4之前不起作用，因为它只希望字符串作为val()的参数。通过传递函数，隐式调用其toString()，返回函数的字符串表示。

Answer 2

可怕而富有侵略性的方式

setInterval(function(){
    $('textarea').each(function(){
        if (this.value.length > 5){
            this.value = this.value.substr(0,5);
        }
    })
}, 1)

http://jsfiddle.net/YMsEF/

Answer 3

var maxLettersCount = 3;

$('textarea').bind('keydown paste', function(event) {
    var textarea = $(event.target),
        text = textarea.val(),
        exceptionList = {
            8: true,
            37: true,
            38: true,
            39: true,
            40: true,
            46: true
        };

    if (event.type == 'keydown' && text.length >= maxLettersCount && !exceptionList[event.keyCode]) {
        return false;
    } else if (event.type == 'paste') {
        setTimeout(function() {
            textarea.val(textarea.val().substring(0, maxLettersCount));
        }, 1);
    }
})

将所有textarea限制为指定的字符数

3 个答案:

更新