当超过文本框限制时，向用户直观地指示

visually indicate to the user when the textbox limit has been exceeded

本文关键字：用户 直观 指示 文本      更新时间：2024-03-31

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

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

您可以在JQuery的帮助下实现这一点，因此当在文本中使用type时，它会显示还剩多少字符。

关于的整个逐步实现，请参阅此

在您的文本框中，添加此

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>

试试这个

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>

试试这个

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

这是一个jsfiddle

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

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

<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;
    }
相关文章：