ASP.NET/MVC3 文本区域/文本框限制/计数字符数

Bryian Tan

4.80/5 (2投票s)

2013年2月18日

CPOL

4分钟阅读

39468

642

如何创建/使用 jQuery 来限制/计数文本区域或文本字段中的字符数

引言

最近，我正在回顾我近两年前写的一篇名为《ASP.NET - 限制文本框控件中的字符数》的文章。我决定借此机会对其进行改进并重拾我的 jQuery 技能。在本文中，我将与大家分享如何使用 jQuery 来实现这一点。您可以使用此 jQuery 插件 limit_textarea 在客户端限制和计数 TextArea 或具有多行文本模式的 TextBox 中的字符数。示例代码包含了一个关于如何将此插件与 ASP.NET Web 窗体、HTML 和 MVC 3 页面一起使用的示例。

实现

在此版本中，该插件接受三个可选参数，分别是 maxLength、displayText 和 displayTextPosition。maxLength 参数允许我们指定 TextArea 中的最大字符数。还有一个选项可以通过 displayText 属性自定义显示的结束文本。最后但同样重要的是，displayTextPosition 提供了指定显示文本消息位置的灵活性。有效值为 topLeft、bottomLeft、topRight 和 bottomRight。默认情况下，最大允许字符数为 500，显示文本消息为“characters left”，文本位置为左上角。

插件中有三个函数，分别是 createLabel、trimEnter 和 validateLimit。清单 1 显示了 createLabel 函数。它负责根据 displayText 和 displayTextPosition 参数创建显示消息。显示消息放置在 HTML span 标签内，其 ID 是 TextArea 对象 ID 和静态文本“_lbl”的组合。显示文本位置是通过使用 TextArea 对象的位置、宽度和高度计算出来的。用于推导文本位置的公式是通过反复试验得出的，欢迎您进行改进。

列表 1

this.createLabel = function (txtArea, options) {
            var txtAreaID = txtArea.attr("id");
            var labelID = txtAreaID + "_lbl";
            //textarea position
            var txtLeftPos = $("[id='" + txtAreaID + "']").position().left;
            var txtTopPos = $("[id='" + txtAreaID + "']").position().top;

            var displayLabel = $('<span id=' + labelID + '>' + 
                               options.displayText + '</span>')
            .css({ position: 'absolute', height: 15, padding: 2,
                'font-size': '75%', display: 'inline-block'
            });
            //attach the label to text area
            txtArea.after(displayLabel);
            //position
            switch (options.displayTextPosition) {
                case 'topRight':
                    displayLabel.css({ top: txtTopPos - 18, 
                    left: txtArea.width() - $("[id='" + labelID + "']").width() - 5 });
                    break;
                case 'bottomLeft':
                    displayLabel.css({ top: txtTopPos + txtArea.height() + 5, 
                    left: txtLeftPos });
                    break;
                case 'bottomRight':
                    displayLabel.css({ top: txtTopPos + txtArea.height() + 5, 
                    left: txtArea.width() - $("[id='" + labelID + "']").width() - 5 });
                    break;
                default:
                    displayLabel.css({ top: txtTopPos - 18, left: txtLeftPos });
                    break;
            }
            //initialize
            limit_textarea.validateLimit(txtArea, options);
            return true;
        }

清单 2 中的 trimEnter 函数会将 TextArea 中的回车符或换行符替换为空字符串。

列表 2

//remove paragraph break from the textarea
        this.trimEnter = function (dataStr) {
            return dataStr.replace(/(\r\n|\r|\n)/g, "");
        }

与前一个版本类似，validateLimit 函数的目的是确保输入的文本不超过允许的最大字符数并显示计数。与前一个版本不同的是，此函数会将回车符或换行符计数计入 maxLength。这样，当剩余字符等于零时，它将在 TextArea 中正确显示文本，而不是截断文本。

列表 3

this.validateLimit = function (txtArea, options) {
            var txtValue = txtArea.val();
            var txtAreaID = txtArea.attr("id");
            var labelID = txtAreaID + "_lbl";
            //get the paragraph break count
            var lineBreakMatches = txtValue.match(/(\r\n|\r|\n)/g);
            var lineBreakCount = lineBreakMatches ? lineBreakMatches.length : 0;
            //remaining character left
            var remaningChar = options.maxLength - limit_textarea.trimEnter(txtValue).length;
            if ($("#" + labelID).length) {
                $("#" + labelID).html(remaningChar + options.displayText);
                if (Number(remaningChar) <= Number(0)) {
                    txtArea.val(txtValue.substring(0, options.maxLength + lineBreakCount));
                    $("#" + labelID).html("0" + options.displayText);
                    return false;
                }
                else
                { return true; }
            }
            return true;
        }
    }

清单 4 中的代码将在用户复制粘贴或使用鼠标剪切时触发该函数。它会等待 250 毫秒，然后再调用 validateLimit 函数，因为粘贴后文本区域中的文本并非立即可用。

列表 4

        $(this).bind('cut paste', null, function (e) {
            if (!e.keyCode) {
                var ctrl = $(this);
                setTimeout(function () {
                    limit_textarea.validateLimit(ctrl, options);
                }, 250);
            }
        });

清单 5 中的代码将在用户在文本区域中输入文本时触发该函数。

列表 5

$(this).keyup(function (e) {
            limit_textarea.validateLimit($(this), options);
        });

清单 6 中的代码是一种解决方法，用于在用户使用鼠标删除文本区域中的文本时触发该函数。问题在于，每次用户在文本区域中左键单击鼠标时都会触发它。如果您的应用程序不需要此功能，可以删除或注释掉这些代码。

列表 6

        //make sure the count is up-to-date
        $(this).mousedown(function (e) {
            if (!e.keyCode) {
                //left mouse click
                if (e.which === 1) {
                    var ctrl = $(this);
                    setTimeout(function () {
                        limit_textarea.validateLimit(ctrl, options);
                    }, 250);
                }
            }
        });

Using the Code

在网页中包含 jQuery 库和插件，以及任意数量的 TextArea 控件/元素。有关如何调用插件，请参阅清单 7。

列表 7

<script type="text/javascript">
    $(document).ready(function () {
        $("[id$='TextBox1']").limit_textarea
                              ({ maxLength: 100, displayText: ' Letters left.' });
        $("[id$='TextBox2']").limit_textarea
                              ({ maxLength: 200, displayTextPosition: 'bottomLeft' });
        $("[id$='TextBox3']").limit_textarea({ displayTextPosition: 'bottomRight' });
        $("[id$='TextArea1']").limit_textarea();
        $("[id$='TextArea2']").limit_textarea({ maxLength: 125 });
    });
</script>

结论

我希望这些信息能对您有所帮助，并使您的编程工作更加轻松。如果您发现任何错误、不同意内容或想帮助改进本文，请给我留言，我将与您合作进行修正。我建议下载演示版并进行探索，以便充分理解其概念，因为我可能在本文中遗漏了一些重要信息。如果您想帮助改进本文，请给我发电子邮件。

在 IE 7.0/8.0/9.0、Google Chrome 24.0.1312.57、Firefox 18.0.2、Safari 5.1.7 上测试。

历史

2010 年 5 月 20 日 - v01.00.00
2013 年 2 月 16 日 - v02.00.00
2013 年 9 月 6 日 - v02.00.01 - 更新了 JavaScript 以在长按键和撤销时更新计数