asp.net - 显示剩余的数字字符以达到 Telerik 的最大长度：RadTextBox

Question

我的asp .net web 应用程序需要一个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" />

如果文本框有最大长度，则在加载时添加属性。

        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>