Question

我现在是新的asp.net我需要在超出文本框限制时向用户直观地指示。请给出一个解决方案。

<asp:TextBox ID="Txtbox" runat="server" Height="50px" TextMode="MultiLine"
        Width="150px" MaxLength="50"></asp:TextBox>

Answer 1

在您的文本框中，添加此

onkeypress="return CheckLength(this.value,50);"

javascript函数CheckLength

function CheckLength(ctrl, maxlen) {
    var textbox = ctrl;
    if (textbox.length >= maxlen) {
        return false;
    }
    else {
        return true;
    }
}

这将阻止您在文本框中输入超过50个字符。您可以在文本框旁边添加工具提示，也许

<asp:Label ID="lblMark1" runat="server" Text="You can enter 50 characters only." Font-Size="0.65em"></asp:Label>

Answer 2

您可以在JQuery的帮助下实现这一目标，因此当在文本中使用类型时，它会显示剩余的字符数。

Refer this for the whole step by step implementation

Answer 3

<script src="Jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var limit = 50;
        var $tb = $('textarea[id$=TextBox1]');
        $tb.keyup(function () {
            var len = $(this).val().length;
            if (len > limit) {
                $(this).addClass('exceeded');
                $('#msg').text(len - limit + " characters exceeded");
            }
            else {
                $(this).removeClass('exceeded');
                $('#msg').text(limit - len + " characters left");
            }
        });
        $('input[id$=btnSubmit]').click(function (e) {
            var len = $tb.val().length;
            if (len > limit) {
                e.preventDefault();
            }
        });
    });

文本框

 <asp:textbox id="TextBox1" runat="server" height="100px" textmode="MultiLine" xmlns:asp="#unknown">
        Width="250px" MaxLength="10"></asp:textbox>
        <span id="msg"></span>
          <br />
        <asp:button id="btnSubmit" runat="server" text="Submit" xmlns:asp="#unknown" />

的CSS：

.exceeded
    {
    background-color:red;
    }

Answer 4

试试这个

function CheckTextLength(text, long) {
    var maxlength = new Number(long); // Change number to your max length.
    if (text.value.length > maxlength) {
        text.value = text.value.substring(0, maxlength);
        $('#YourErrorDivid').empty().append(" Only " + long + " characters allowed");
    }
}

 <asp:TextBox runat="server" ID="Txtbox" Width="450px" TextMode="MultiLine"
            onKeyPress="CheckTextLength(this,50)"></asp:TextBox>

Answer 5

试试这个

$("#Txtbox").on('input',function () {
    if($(this).val().length == $(this).attr('maxlength')) {
        $(this).css('background-color','red');
    }
});

Answer 6

这是jsfiddle

显示大纲因为它不会占用任何空间。如果用户删除了一些字符，我也会删除大纲。

$("#txtName").keyup(function(){
    if($(this).val().length >= $(this).attr('maxLength'))
    {
        $(this).css('outline','2px solid red');
    }
    else 
    {
        $(this).css('outline','');
    }
});

在超出文本框限制时向用户显示

6 个答案: