Ограничить Textarea, чтобы не принимать 250 символов

Question

У меня есть текстовая область на C #, см. Код ниже:

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

Теперь я хочу, чтобы текстовая область не принимала более 250 символов, независимо от того, что пользователь делает COPY & PASTE, посредством WRITING, DRAG & DROP и т. Д., Если пользователь пытается скопировать или перетащить и отпустить более 250 символов, первые 250 символов скопировано в текстовое поле. Я знаю, что в TEXTAREA нет атрибута MAXLENGTH. Если это невозможно с .NET, решение с javascript или Jquery будет работать.

Пожалуйста, помогите

Answer 1

Вы можете использовать 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);
});

Существует библиотека (jQuery.charcounter) , которая будет автоматически добавлять оставшиеся символы, а также то, что не входит в DOM.

Answer 2

Вы должны подключить функции для событий

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

Текстовое поле счетного поля для отображения оставшихся символов.

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

Расширение ответа @ 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.

Answer 5

1) Очень простой способ справиться с этим - начать с события onChange:

<textarea id="yourTextArea" onchange="this.value.length = Math.min(this.value.length, 250)"></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) Если вы хотите выполнить эту проверку на стороне сервера, вам просто нужно получить значение текстовой области и обрезать его.

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

Answer 6

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

Answer 7

Для интерактивной обратной связи вы должны выполнить вышеизложенное в 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>