IE中的文本区域最大长度



是否有任何方法可以从给定的keydown事件中判断所有者input[type=text]textarea在应用后的长度是减少还是增加?


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

我还没有看到一个垫片可以限制IE中textarea的字符长度,其键盘行为与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));
    }
});

上述实现的问题是,您可以键入或粘贴11个字符,并且在值更改之前,值不会修剪到最大长度。我希望在值更改之前防止更改,以便更好地与input[type=text,maxlength]行为保持一致。

您已经在监听keydown和keyup事件了——不幸的是,您无能为力。keypress事件可能会增加更多内容,但我认为它们会随着keyup一起触发,所以可能不会。

上面代码的一个问题是,如果右键单击并粘贴(或通过编辑菜单进行粘贴),则不会有帮助。

一种可能的解决方法是使用CSS将文本区域隐藏在屏幕外,然后放置另一个模仿它的"假"文本区域。当用户键入时,让它在屏幕外的一个中执行操作,然后将您想要的内容复制到屏幕上的"false"中。在实践中,我不确定这将如何处理像右键单击>粘贴这样的情况——这可能需要很多麻烦。

您的问题是您的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();
            }
        }
    });

最新更新