限制 Textarea 不接受 250 个字符

Question

我在 C# 中有一个 textarea，请看下面的代码：

<asp:Label ID="lblQuestions" runat="server" CssClass="addinfo">
                    Question & Comments</asp:Label>
<asp:TextBox ID="txtQuestions" Rows="5" Columns="5" TextMode="MultiLine" runat="server" MaxLength="250"></asp:TextBox>

现在我希望 textarea 不应接受超过 250 个字符，无论用户通过 WRITING 和 DRAG & DROP 等方式进行复制和粘贴，如果用户尝试复制或拖放超过 250 个字符，则前 250 个字符应该是复制到文本区域。我知道 TEXTAREA 中没有 MAXLENGTH 属性。如果 .NET 无法实现，则使用 javascript 或 Jquery 的解决方案将起作用。

请帮忙

Answer 1

扩展@gnarf 的答案：

<textarea class="max-length" cols="30" id="comment-box" maxlength="250" rows="10"></textarea></span>
<span id="comment-box-chars-left">250</span> characters left
<script type="text/javascript>
    function updateCharsLeft(id, maxChars, length) {
        $('#' + id + '-chars-left').html(maxChars - length);
    }

    $(document).ready(function() {
        $('.max-length').each(function() {
            updateCharsLeft($(this).attr('id'), $(this).attr('maxLength'), $(this).val().length);
        });

        $('.max-length').bind('keyup change blur input paste', function() {
            var maxChars = $(this).attr('maxLength');

            // fire this off a few ms after the event happens
            setTimeout((function(el) { // closure to store "this" as "el"
                return function() {
                    if (el.value.length > maxChars) {
                        el.value = el.value.substring(0, maxChars);
                    }
                    updateCharsLeft(el.id, maxChars, el.value.length);
                }
            })(this), 10);
        });
    });
</script>

这使用一个属性来指定最大字符数并更新显示剩余字符数的标签。文本区域必须具有类 max-length 并且将显示剩余字符数的元素必须与相应的文本区域具有相同的 id 并附加 -chars-left。

Answer 2

您可以使用 jQuery 一次绑定多个事件

$("#txtQuestions").bind("keyup change blur input paste", function() {
  // fire this off a few ms after the event happens
  setTimeout(
   (function(el){ // closure to store "this" as "el"
     return function() { if (el.value.length>250) el.value.length = 250; }
   })(this), 10);
});

有一个library (jQuery.charcounter) 会自动将剩余的字符添加到 DOM 中。

Answer 3

<asp:TextBox
    onkeypress="return value.length<=10;"
    onpaste="return (value.length+clipboardData.getData('Text').length)<=10"
    TextMode="MultiLine"
    runat="server"  
/>

Answer 4

您也可以使用 ASP.NET 验证器来执行此操作：

<asp:TextBox ID="MyTextBox" runat="server" TextMode="MultiLine" Rows="4" />
<asp:RegularExpressionValidator Display="Dynamic" ID="RegularExpressionValidator1" ControlToValidate="MyTextBox" Text="<p>A maxiumum of 250 characters is allowed.</p>"  runat="server" ValidationExpression="^(.|\s){0,250}$" />

Answer 5

对于交互式反馈，您应该在 javascript 中执行上述操作，因为有线控件在回传到服务器之前不会做出反应（需要重新加载页面）。如果您在每次击键时更新字符数，这可能会导致相当多的服务器负载。

下面是一个粗略的 js 实现，它将简单地计算每次更改时的 ASCII 字符数。如果由于剪切和粘贴而修改了文本区域，这也将起作用：

<script type="text/javascript">
function countWords() {
var text = document.getElementById("txtBox1").value;
if (text.length > 250) text = text.substr(0,250);
document.getElementById("txtBox1").value = text;
}
</script>

<textarea id="txtBox1" onkeyup="countWords();" >text here</textarea>

Answer 6

1) 一个非常简单的处理方法是从 onChange 事件开始：

<textarea id="yourTextArea" onchange="this.value.length = Math.min(this.value.length, 250)"></textarea>

这里的主要缺点是，直到焦点离开 textarea，textarea 才会更新。

2) 您应该能够将上面的示例修改为触发表单的 onSubmit 事件的表单验证函数。

<script type="text/javascript">
    document.forms[0].onsubmit = function() { document.getElementById("yourTextArea").value.length = Math.min(this.value.length, 250); }
</script>

3) 如果你想在服务器端做这个验证，你真的只需要获取 textarea 的值并截断它。

string validText = yourTextArea.Value.Substring(0, 250);

Answer 7

你必须为事件连接函数

您要执行此操作的区域的 onpaste、onkeyup 和 onfocus。

对于 asp 文本框，我认为您只需要考虑 OnTextChanged 事件。

对于文本区域

<INPUT id="counterMessage" readOnly size="3" value="250" name="counterMessage">                                                                                                     
<TEXTAREA onpaste="PasteCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
                                                                                                                            id="txtAreaMessage" onkeyup="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);"
                                                                                                                            style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; OVERFLOW: hidden; BORDER-LEFT: 0px; WIDTH: 99%; BORDER-BOTTOM: 0px; HEIGHT: 95px; TEXT-ALIGN: justify"
                                                                                                                            onfocus="textCounter(this.form.txtAreaMessage,this.form.counterMessage,250);" name="txtAreaMessage"
                                                                                                                            rows="3" runat="server"></TEXTAREA>


function PasteCounter(field, countfield, maxlimit)
        {
            var len;
            var txt = clipboardData.getData("Text");
            txt = field.value + txt
            len = parseInt(txt.length);
            if ( len >  maxlimit )
            {
                event.returnValue=false;
                txt = txt.substring(0, maxlimit);       
                field.value = txt;                  
                alert("Only " + maxlimit + " characters are allowed");
            }
            countfield.value = maxlimit - txt.length;
        }    
        function textCounter(field, countfield, maxlimit)
        {
            if (field.value.length > maxlimit )
            {      
                field.value = field.value.substring(0, maxlimit );
                alert("Only " + maxlimit + " characters are allowed");
            }
            countfield.value = maxlimit - field.value.length;
        }

countfield 文本框用于显示剩余字符。