J'ai une zone de texte multiligne qui ne peut contenir que 500 caractères. Maintenant, je veux montrer à l'utilisateur le nombre de caractères restants pendant qu'ils tapent dans la zone de texte, comme c'est le cas lorsque nous utilisons Twitter.comment afficher le nombre de caractères restant dans une zone de texte multiligne dans asp.net?
aider Veuillez
Voir ASP.NET Text Character Counter par Ross Hawkins.
Vous devrez écrire du code js.
ici est snipptet simple:
<html><form name="form1"><input type="text" name="textArea" size="400" onkeyup="document.form1.count_display.value=document.form1.textArea.value.length;"><br/><input type="text" name="count_display"></form></body></html>
vous pouvez modifier le calcul pour montrer les caractères à gauche, ou le nombre déjà tapé, que vous avez besoin
nous allons d'abord créer une zone de texte multiligne.
<asp:TextBox ID="textTextBox" Text='<%# Bind("Text") %>' runat="server"
CssClass="text smsTextBox" TextMode="MultiLine" Height="100px"
MaxLength="500" >
</asp:TextBox>
<p>
<span id="remaining" class="remaining">500 characters remaining</span>
<span id="messages" class="messages">1 message(s)</span>
</p>
Maintenant, ajoutez à un fichier javascript ou l'ajouter à Javascript à la page que l'élément est rendu. Chaque fois que le document est chargé le script est exécuté
<script type="text/javascript">
$(document).ready(function() {
if (typeof $('.smsTextBox').val() !== "undefined") {
var $remaining = $('.remaining'),
$messages = $remaining.next();
var chars = $('.smsTextBox').val().length,
messages = Math.ceil(chars/500),
remaining = messages * 500 - (chars % (messages * 500) || messages * 500);
$remaining.text(remaining + ' characters remaining');
$messages.text(messages + ' message(s)');
}
});
$(document).ready(function() {
var $remaining = $('.remaining'),
$messages = $remaining.next();
$('.smsTextBox').keyup(function() {
var chars = this.value.length,
messages = Math.ceil(chars/500),
remaining = messages * 500 - (chars % (messages * 500) || messages * 500);
$remaining.text(remaining + ' characters remaining');
$messages.text(messages + ' message(s)');
});
});
</script>
Bonne codage :-D
Merci pour le code, mais la zone de texte est le contrôle de asp.net pas de contrôle html. – HotTester
bien sûr. C'était seulement pour l'échantillon. vous pouvez coller les événements clients, cela fonctionnera de la même manière – Tamir