Compteur de caractères

**Marc_27** · 24/06/2009, 14h52

Bonjour à tous,

dans un application Access que j'ai développé, j'avais une TextBox (txtComents) et un Libébé (lblReste). L'idée soit de afficher dans le Libébé la quantitée de caractères que l'utilisateur pourrait encore taper:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
Private Sub txtComents_Change()
Me.lblReste.Caption = "Il vous reste " & 255 - Len(Me.txtComents.text) & " caractères"
End Sub

J'essaye de faire le memê avec un application Asp.Net, mais je ne vois pas comment le faire...
(Je pense qu'il ne faut pas utiliser du Code-Behind, car je ne veux pas recharger la page à chaque clic, mais je ne suis pas sure)

Est-ce que quelqu'un pourrait m'aider, svp?
Merci d'avance

**Redouane** · 24/06/2009, 15h04

Bonjour,

tu peux utiliser le TextChanged comme event, dans ce cas, t'auras besoin d'ajouter le AutoPostBack dans ton TextBox (pour forcer le rafraichissement, si on peux dire ça):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 <asp:TextBox ID="txtComents" runat="server" AutoPostBack="true"></asp:TextBox>

et dans le event :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
Protected Sub txtComents_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles txtComents.TextChanged
 
        Dim nbr As Integer = 255 - Me.txtComents.Text.Length
 
        Me.lblReste.Text = "Il vous reste " & nbr.ToString() & " caractères"
 
    End Sub

**Marc_27** · 24/06/2009, 15h21

Merci pour le reponse Redouane,

J'avais déjà essayé de faire ça.
Le seulle soucis c'est qu'il faut sortir et redoner le focus sur le TextBox à fin de que le Libébé change, ce n'est pas "en temps réel"

Je voudrais que le Libébé change à chaque clic du clavier...

**Redouane** · 24/06/2009, 15h35

je pense que c'est un code javascript qu'il te faut.
ci interessant, j'espère qu'il y'aura qlq'un qui va repondre et nous donner le code

**Marc_27** · 24/06/2009, 15h37

Je continue à chercher en tout cas...
Merci encore une fois

**Philippe Vialatte** · 24/06/2009, 16h01

Salut,

a l'arrache comme ca, je ferais qq chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<script type="text/javascript">
function UpdateInfoMessage(){
 
  var nbchars = 255 - document.getElementById(<%= txtComents.ClientId %>).value.length;
  document.getElementById(<%= lblReste.ClientId %>).value = "Il vous reste " + nbchars + " caracteres";
 
 
}
</script>
....
<asp:Textbox ID="txtComents" runat="server" onKeyPress="UpdateInfoMessage();" />

...a tester, mais c'est l'idee

**Marc_27** · 24/06/2009, 16h24

Merci Philippe.

J'ai essayé 2 fois (J'utilise une MasterPage)
La 1ère:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/WebDRH.Master" CodeBehind="frmDemandes.aspx.vb" Inherits="WebDRH.WebForm7" 
    title="Application DRH - Demande de formation" %>
 
  <script type="text/javascript">
function UpdateInfoMessage(){
   var nbchars = 255 - document.getElementById(<%= txtComents.ClientId %>).value.length;
  document.getElementById(<%= lblReste.ClientId %>).value = "Il vous reste " + nbchars + " caracteres";
 }
</script>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
...
<asp:TextBox ID="txtComents" runat="server" Width="400px" Height="136px" 
                    MaxLength="255" AutoCompleteType="Department" onKeyPress="UpdateInfoMessage();" ></asp:TextBox></td>
...

Celle la plante, il ne charge pas la page.

Et la 2ème en mettant ton code dans le ContentHolder, rien se passe...

**Redouane** · 24/06/2009, 17h46

Voila, suivant le code de Philippe Vialatte, que j'ai modifié un petit peu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript">
        function UpdateInfoMessage(){
 
          // longeur de la chaine saisie en cours
          var lenStr = document.getElementById('txtComents').value.length + 1;  
          var nbchars = 255 - lenStr;
 
          document.getElementById('lblReste').value = "Il vous reste " + nbchars + " caracteres";
          document.getElementById('TextBox1').value = "Il vous reste " + nbchars + " caracteres";
 
 
        }
    </script>

Telle que, le TextBox1 est un autre TextBox normal, pour tester l'affichage:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<asp:TextBox ID="TextBox1" runat="server"/>

Je vois que le code marche bien avec TextBox1 mais pas le label lblReste.

bonne courage

**Philippe Vialatte** · 24/06/2009, 18h14

arf, le boulet...

c'est normal, c'est un label, donc il faut utiliser innertext, et pas value

**Redouane** · 24/06/2009, 19h51

de ma part, je te remercie Philippe pour le code

j'espère que Marc_27 va résoudre le problème avec ce bout de code.

**Marc_27** · 25/06/2009, 10h20

Merci beaucoup Redouane et Philippe Vialatte,

J'ai fait une page test et le code a bien marché!

Il me reste deux petites problemes à résoudre:
1- Lorsque je tape "Delete" le compteur ne fait pas compteur + 1;

2- Je ne pas reussi à mettre le code dans le contexte de la MasterPage.
Est-ce que vous savez où je dois mettre le Script?

**Redouane** · 25/06/2009, 16h08

Il me reste deux petites problemes à résoudre:
1- Lorsque je tape "Delete" le compteur ne fait pas compteur + 1;

2- Je ne pas reussi à mettre le code dans le contexte de la MasterPage.
Est-ce que vous savez où je dois mettre le Script?

Ci-aprés tu trouveras un code qui te permets de faire le delete, sachant que pour moi le CodeKey de Delete est 8:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
 <script type="text/javascript">     
        var Nbre;
        function UpdateInfoMessage(e){
 
          // longeur de la chaine saisie en cours
          var lenStr = document.getElementById('txtComents').value.length + 1;  
          var nbchars = 255 - lenStr;
          Nbre = nbchars;
 
          document.getElementById('lblReste').innerText = "Il vous reste " + nbchars + " caracteres";
 
        }
 
        function detectTouche(e){
            if(parseInt(navigator.appVersion,10) >=4)
            {       
              if(e.keyCode == 8)
                 {
                    if( Nbre < 255 )
                     Nbre = Nbre +1;
 
                    document.getElementById('lblReste').innerText = "Il vous reste " + Nbre + " caracteres";
                 }
            }
        }      
    </script>
..................................
 
<asp:TextBox ID="txtComents" runat="server" onKeyPress="UpdateInfoMessage(event);" onkeydown="detectTouche(event)"/>

Pour le 2ème probleme, désolé j'ai pas encore cherché comment faire, mais le probleme c'est que lors du lancement de ta page, l'id de ton control ça change, pusique la page est sous le MasterPage, par exemple il peut prendre comme id :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

ctl00$ContentPlaceHolder1$txtComents

**Marc_27** · 25/06/2009, 17h06

Merci encore une fois!!!

Je vais chercher un peu plus comment faire le script depuis ma Master Page.

Je débute en Asp.Net (Asp pour être honest), ton code est-il écrit en C#, je pense. Je pourrais le faire em VB aussi?
(Ou je parle des betises et ce n'est pas du C#?)

Merci beaucoup

**Redouane** · 25/06/2009, 17h19

Le dernier code qu'on a fais, c'est du Javascript.
On a jusqu'à mnt, codé coté client, c'est pourquoi tu trouves des changements dans ton label en tapant des caractères sans que la page se rafraichi.
Il n'y a pas un aller retour vers le serveur.
Dans le cas contraire tu peux utiliser du C# ou Vb.net comme langage ;-)

Bonne courage.

**Marc_27** · 25/06/2009, 17h30

J'ai trouvé la solution:

Dans ton code, j'ai mis "ctl00$ContentPlaceHolder1$txtComents" et "ctl00_ContentPlaceHolder1_lblReste".

J'ai trouvé ces valeurs avec le MS FrontPage, en regardant le code HTML de la page.

C'est donc Résolu!

**Philippe Vialatte** · 25/06/2009, 18h01

euh..c'est exactmenet a ca que sert le tag serveur avec ClientId, a ce que se soit le vrai id qui soit affiche cote client

**Marc_27** · 19/01/2010, 09h58

Bonjour Philippe.

J'ai fait aujourd'hui un test de mon application dans un vrai server IIS, et j'ai eu l'erreur suivant:

"Redirect URI cannot contain newline characters".

Je crois qui ça peut avoir un rapport avec les noms des controles qui j'ai utilisé, comme 'ctl00$ContentPlaceHolder1$txtComents'.

J'ai essayé de les changer, mais comme je débute en ASP, je n'ai pas reussi à faire avec les tags ClientID. Est-ce que tu peux me donner une petite aide là?

Merci
Marc