Question

我的asp .net网络应用程序需要一个telerik：RadTextBox，最多可以接受160个字符。每次在这个文本框中输入一个字符时，我希望我可以键入的剩余字符数量作为标签显示在该文本框附近。任何人都可以告诉我应该使用哪个事件并提供javascript代码来实现它？

Answer 1

我做了类似的事情，其中包含一系列用户控件，其中包含文本框。我建议使用onkey up和onkey down事件来增加/减少你的计数器。

这是我们使用的javascript。

<script type="text/javascript" language="Javascript">
    //Character count script!
    function textCounter(field, countfield, maxlimit) {
        if (countfield == null) { return; }

        if (field.value.length > maxlimit)
            field.value = field.value.substring(0, maxlimit) + " Characters Remaining";
        else
            countfield.value = maxlimit - field.value.length + " Characters Remaining";
    }
</script>

这类似于文本框，其下方有计数器字段。

   <telerik:RadTextBox ID="txtTextBox" runat="server"  />
    <input readonly="readonly" enableviewstate ="false" type="text" runat="server" id="charCount" size="25" name="charCount" tabindex="-1" value="" 
        style="border: solid 0px white; display:none; background: white; font-size: 11px; color: #FF0000; text-align: right; float:right" />

如果文本框有maxlength，则会在onLad上添加属性。

        txtTextBox.Attributes.Item("onblur") = charCount.ClientID + ".style.display='none';"
        txtTextBox.Attributes.Item("onfocus") = charCount.ClientID + ".style.display='block';"
        txtTextBox.Attributes.Item("onkeyup") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"
        txtTextBox.Attributes.Item("onkeydown") = "textCounter(this, " + charCount.ClientID + "," + myMaxLength.ToString + ");"

当所有这些组合在一起时，如果你已经设置了最大限制，只有当该文本框具有焦点时，它才会计数器。焦点消失后，脚本onblur会再次隐藏文本框。计数器在onkeyup和onkeydown上被触发，因此计数将保持准确。它将向后计数到0，一旦达到0，用户将无法输入更多文本。

Answer 2

这里有一些关于你问题的提示：

为了计算字符数并排除换行符，您可以使用以下内容：

<telerik:RadTextBox ID="RTB1" runat="server" TextMode="MultiLine" ClientEvents-OnKeyPress="KeyPress" />

<script type="text/javascript">

function KeyPress(sender, args)
{
    var text;
    if ($telerik.isIE || args.get_domEvent().rawEvent.keyCode == 0 || args.get_domEvent().rawEvent.keyCode == 13) // 13 : Enter key
    {
        text = escape(sender.get_value() + args.get_keyCharacter());
    }
    else
    {
        text = escape(sender.get_value());
    }

    while (text.indexOf("%0D%0A") != -1)  // IE
    {
        text = text.replace("%0D%0A", " ");
    }
    while (text.indexOf("%0A") != -1)
    {
        text = text.replace("%0A", " ");
    }
    while (text.indexOf("%0D") != -1)
    {
        text = text.replace("%0D", " ");
    }

    var calculatedLength = unescape(text).length;

    if (args.get_domEvent().rawEvent.keyCode == 8 && calculatedLength > 0) // 8 : backspace
    {
        calculatedLength -= 1;
    }

    document.title = calculatedLength;
}

</script>

这样你就可以做到这一点。

即使您可以查看http://www.telerik.com/community/forums/aspnet-ajax/input/counting-characters.aspx了解更多详情。

谢谢，

Answer 3

使用onFocus客户端事件：

例如

textBox1.Attributes.Add("onFocus", "Counter('textBox1','LabelID',160)");

<script>
function Counter(textboxID, LabelID, MaxCharacters) {
  var count = MaxCharacters - document.getElementById(textboxID).value.length;
    document.getElementById(LabelID).innerHTML = count; 
}
</script>

显示要达到telerik的最大长度的数字字符：RadTextBox

3 个答案: