asp.net - telerik:RadTextBox の最大長に達するまでの残りの文字数を表示する

Question

私の asp .net Web アプリケーションには、最大 160 文字を受け入れる te​​lerik:RadTextBox が必要です。このテキストボックスに文字が入力されるたびに、入力できる残りの文字数をこのテキストボックスの近くにラベルとして表示したいのですが、どのイベントを使用してこれを実装するための 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" />

テキストボックスに最大長がある場合、属性は onLoad に追加されます。

        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>