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个字符，无论用户做什么COPY＆amp; PASTE，通过WRITING和DRAG＆amp; DROP等，如果用户试图复制或拖动＆amp;删除超过250个字符的前250个字符应该在textarea中复制。我知道TEXTAREA中没有MAXLENGTH属性。如果使用.NET无法使用javascript或Jquery的解决方案。

请帮忙

Answer 1

您必须为事件连接函数

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

对于asp文本框，我认为你必须只考虑OnTextChanged事件。

对于textarea

<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文本框用于显示剩余的字符。

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.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 4

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 5

扩展@ 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，并且显示剩余字符数的元素必须与附加了-chars-left的相应文本区域具有相同的id。

Answer 6

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

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

<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 7

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

限制Textarea不接受250个字符

7 个答案: