当我在文本框中输入完某些字符时显示消息答案

【问题标题】：Display message when I finish typing certain characters in textbox当我在文本框中输入完某些字符时显示消息
【发布时间】：2014-07-28 10:54:38
【问题描述】：

我有一个要求，我需要在密码文本框旁边显示一条限制为 15 个字符的消息。当用户输入 15 个字符时，应立即显示一个闪烁的标签以提醒用户。

当用户点击文本框外时我实现了它，但我需要在用户输入第 15 个字符时立即显示消息

在输入文本框本身时，如果达到最大限制，应提示用户。

我的代码：

<asp:TextBox runat="server" MaxLength="15" TextMode="Password" ID="Password"></asp:TextBox>
<asp:Label runat="server" AssociatedControlID="Password" ID="lblMaxChar" />
<asp:CustomValidator ID="cvMaxLimit" runat="server" ControlToValidate="Password" ClientValidationFunction="ValidateTextLength" /><br/>

function ValidateTextLength(source, args) {
    var length = $get('<%=Password.ClientID %>').value.length;
    if (length >= 15) {
        var lbl = document.getElementById('<%=lblMaxChar.ClientID %>');
        $(lbl).text('Limit is 15 characters');
       blink(lbl);
    }
}
var stopBlinking = false;
setTimeout(function () {
    stopBlinking = true;
}, 8000);
function blink(selector) {
    $(selector).fadeOut('slow', function () {
        $(this).fadeIn('slow', function () {
           if (!stopBlinking){
                blink(this);
            }
           else {
            $(this).hide();
        }
        });
    });
}

【问题讨论】：

在keydown 或keyup 上为input 添加一个侦听器，然后调用您的ValidateTextLength 函数
您是否将cvMaxLimit 关联到您的文本框？
感谢@RobSchmuecker 的提示，我不太熟悉，但会尝试。
@EduardoFernandes，是的，我通过添加 ControlToValidate 属性来做到这一点

标签： c# javascript jquery asp.net

【解决方案1】：

所以你的问题只是在文本框的字符数达到 15 时显示消息左右..

根据您在文本框控件中的要求使用 onkeyup/onkeydown/onkeypress 事件处理程序。

试试这个

> <asp:TextBox runat="server" MaxLength="15" onkeypress="return jQuery/Javascript function();" > TextMode="Password" ID="Password"></asp:TextBox>

【讨论】：

【解决方案2】：

将您的文本框“密码”值复制到 Jquery 中的变量中并获取长度并检查它。

I submitting example code :

    example:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function () {
         $('#btngettext').click(function (e)
                { var GetValue = $('#txtname').val();
                    alert(GetValue.length);
                });
            });

        });
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="txtname"></asp:TextBox>
<asp:Button runat="server" ID="btngettext" Text="Display" />
</div>
</form>
</body>
</html>

Another Very good answer of your question.

【讨论】：

Manoj，问题不是检索长度，我已经做到了，我只需要在输入第 15 个字符时调用该函数

【解决方案3】：

这是一种方法。

    $(document).ready(function () {

        $('#<%=Password.ClientID %>').keydown(function (event) {
            var length = $('#<%=Password.ClientID %>').val().length;
            if (length >= 15) {
                alert('Max 15 characters reached'); //replace this required function call
                event.preventDefault();
            }
        });
    });

【讨论】：

谢谢，这看起来精确而整洁

【解决方案4】：

我已经实现了以下方式。希望这可以帮助某人

aspx代码：

<asp:TextBox runat="server" Width="250px" MaxLength="15" TextMode="Password" ID="Password"></asp:TextBox>
<asp:Label runat="server" AssociatedControlID="Password" ID="lblMaxChar" class="blinkingLimitMsg"/>

aspx.cs

 protected void Page_Load(object sender, EventArgs e)
 {   
    Password.Attributes.Add("onkeypress", "return ValidatePasswordLength(myresxKey);
 }

javascript 功能：

此函数将接收闪烁消息作为参数并调用闪烁函数

 function ValidatePasswordLength(MsgText) {
    var length = $('#<%=Password.ClientID %>').val().length;
    if (length >= 15) {
        var lblMsg = document.getElementById('<%=lblMaxChar.ClientID %>');
        $(lblMsg).text(MsgText);
         BlinkCartItemCount('.blinkingLimitMsg');
         document.onkeydown = KeyCheck; 
    }
}

此函数使用 FadeTo() 使文本闪烁：

  function BlinkItem(cssClass) {
  $(cssClass).fadeTo(400, 0.13).fadeTo(400, 1).fadeTo(400, 0.13).fadeTo(400, 1).fadeTo(400, 0.13).fadeTo(400, 1);
  $(cssClass).fadeIn(function () { this.style.removeAttribute("filter"); });
 }

这用于在用户清除字符（小于 15）时隐藏消息。这将检查退格和删除按键：

 function KeyCheck() 
 {
  var hl = $(".blinkingLimitMsg");
  var KeyID = event.keyCode;
  switch(KeyID)
  {
   case 8: $(hl).text(""); 
           break; 
   case 46: $(hl).text("");
           break;
   default:break;
   }
  }

【讨论】：