IE中的Textarea maxlength

时间:2012-01-19 00:30:38

标签: html input internet-explorer-8 textarea internet-explorer-9

是否有任何方法可以告知给定的keydown事件,所有者input[type=text]textarea在应用后是否会减少或增加?


背景:拥有一个HTML5站点(<!DOCTYPE html>),必须支持IE 8和9用户作为主要消费者。在某些页面上,我有<textarea>maxlength="100"个属性元素。 IE无法识别maxlength属性,并允许在textarea中输入超过100个字符。

我没有看到使用与textarea元素相同的键盘行为来限制IE中input[type=text]的字符长度的垫片。

出于这个原因,我正在尝试写一个。

现有的实现看起来像这样:

$('textarea[maxlength]').on('keydown keyup blur', function(e) {
    var $this = $(this),
        maxlen = $this.attr('maxlength'),
        val = $this.val();

    if (val.length > maxlen) {
        $this.val(val.substr(0, maxlen));
    }
});

above implementation的问题在于您可以键入或粘贴11个字符,并且在值更改之前,该值不会被修剪为maxlength。我希望在值更改之前阻止更改,以更好地与input[type=text,maxlength]行为保持一致。

2 个答案:

答案 0 :(得分:1)

你已经在听keydown和keyup事件了 - 不幸的是,你无能为力。按键事件可能会增加更多内容,但我认为它们会与keyup一起触发,所以可能不会。

上述代码的一个问题是,如果右键单击并粘贴(或通过编辑菜单执行此操作),则无效。

一种可能的解决方法是使用CSS隐藏屏幕外的textarea,然后放置另一个模仿它的“假”textarea。当用户键入时,在屏幕外操作它,然后将您想要的内容复制到屏幕上的“假”。在实践中,我不确定这对于右键单击&gt;等实例是如何工作的。粘贴情况 - 可能需要很多麻烦。

答案 1 :(得分:0)

您的问题是您的Internet Explorer甚至没有将maxlength的值放入html中,尝试将其硬编码到javaScript中,例如;

 $(document).on('input keyup', 'textarea', function(e) {
        // maxlength attribute does not in IE prior to IE10
        // http://stackoverflow.com/q/4717168/740639
        console.debug("here")
        var $this = $(this);
        var maxlength = 255;
        if (!!maxlength) {
            var text = $this.val();

            if (text.length > maxlength) {
                // truncate excess text (in the case of a paste)
                $this.val(text.substring(0,maxlength));
                e.preventDefault();
            }

        }

    });