Sens de lecture d'un TextArea

Version imprimable

10/04/2012, 14h28
zooffy

Sens de lecture d'un TextArea

Bonjour à tous.

Je dois coder un Chat pour un site Web. Je travaille en .NET, option VB.

J'ai fait un Chat trés simple avec un TexteArea qui reçoit les textes, une zone de texte pour la saisie et un bouton pour envoyer le texte. Le tout avec de l'Ajax pour mettre à jour chez tout le monde. Pour l'instant tout va bien.

Mon souci arrive pour le sens de lecture du TextArea. Les lignes s'empilent bien, mais je voudrais que celle du bas reste visible, avec un focus. Mais la mise à jour de l'Ajax fait que l'on revoit les premières insérées. Il ne descend pas en bas du TextArea et je ne trouve pas d'option ou d'argument pour l'obliger à montrer la fin à la place du début.

Avez vous une idée ?
Est ce que c'est possible ou est ce qu'il faut que je stock mon texte dans un autre type de contrôle ?

Merci pour votre aide.
10/04/2012, 14h48
Kaamo

pour que le scroll reste en bas :

Code:

document.getElementById('textareaElement').scrollTop = document.getElementById('textareaElement').scrollHeight;

Merci beaucoup pour ton aide.

ça m'a l'air bien, mais je n'arrive pas à le mettre en place.

Je ne sais pas si cela vient du fait que je sois en .NET ou si cela vient de ma méconnaissance en javascript.

J'ai fait ça :

Code:

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
31
32
33
34
35
36
37
38
39
40
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testchat.aspx.vb" Inherits="testchat" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
    function txtBas() {
            document.getElementById('txtChat').scrollTop = document.getElementById('txtChat').scrollHeight;
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <div>
    Page de test du chat
    <asp:Timer ID="Timer1" runat="server" Interval="1000"></asp:Timer>
    <asp:UpdatePanel ID="upChat" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnEnvoi" EventName="Click" />
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
    <asp:Label ID="lblChat" runat="server" Width="400" Height="150" BorderStyle="Solid" BorderWidth="1" >ici le text de chat</asp:Label>
    <asp:TextBox ID="txtChat" runat="server" ReadOnly="true" TextMode="MultiLine" Columns="80" Rows="15" OnTextChanged="javascript:txtBas();"></asp:TextBox><br />
    </ContentTemplate>
    </asp:UpdatePanel>
    <asp:UpdatePanel ID="upenvoi" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:TextBox ID="txtMsg" runat="server" TextMode="SingleLine" MaxLength="200"></asp:TextBox>
    <asp:Button ID="btnEnvoi" runat="server" Text="Envoyer" />
    </ContentTemplate>
    </asp:UpdatePanel>
 
    </div>
    </form>
</body>
</html>

Et au chargement de la page il me dit :

Citation:

Message d'erreur du compilateur: BC30456: 'javascript' n'est pas un membre de 'ASP.testchat_aspx'.

Pourtant, autant que je me souviennes c'est de cette manière que l'on appelle les fonctions javascript, mais je peux me tromper aussi.

Merci pour ton aide.

10/04/2012, 16h58
FirePrawn

Bonjour,

Code:

<asp:TextBox ID="txtChat" runat="server" ReadOnly="true" TextMode="MultiLine" Columns="80" Rows="15" OnTextChanged="javascript: txtBas();"></asp:TextBox><br />
11/04/2012, 11h19
zooffy

Merci pour ton aide.
Si je comprends bien, c'est juste une histoire d'espace ?

Je teste dés que je rentre sur mon ordinateur.

Merci et bonne journée.
11/04/2012, 17h24
zooffy

Bon, j'ai mis l'espace comme tu em l'indique, j'ai même fait un copier coller de ton code pour être sûr.

Mais cela ne fonctionne pas.

Une autre idée ?
11/04/2012, 17h28
FirePrawn

Essaie

Code:

OnTextChanged="return txtBas();"
11/04/2012, 17h37
Kaamo

et pourquoi ne pas utiliser tout simplement onchange à la place de OnTextChanged ?

OnTextChanged implique d'utiliser une fonction server side. Alors que txtBas est une fonction "bateau" client.
12/04/2012, 00h07
zooffy

Oui, Kaamo, exactement. ça marche mieux maintenant.

Enfin, ça marche mieux sans plus parce que ça fait pas ce que je voudrais, le scroll reste en haut.

Du coup je sais pas trop quoi faire pour parvenir à mes fins.
Avez vous une autre idée ?
12/04/2012, 09h25
Kaamo

Le code que j'ai posté au début fonctionne bien en tout cas pour un textarea qui a un scroll vertical.

Peut-être qu'en vérifiant le code source généré ?

Bon j'ai vérifié le code généré et tout semble en ordre.
Par contre, je ne comprends pas pourquoi il ne veux pas éxécuter la function.

Et en même temps, en faisant des textes, je me suis rendu compte que ce que je voulais est le comportement normal d'un textArea. Ce doit être mon updatePanel qui le réinitialise à chaque tour de timer.

Et donc là, je suis encore plus paumé.

le code généré :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <span id="Timer1" style="visibility:hidden;display:none;"></span> <div id="upChat"> <script language="javascript" type="text/javascript"> function txtBas() { document.getElementById('txtChat').scrollTop = document.getElementById('txtChat').scrollHeight; alert('toto'); } </script> <textarea name="txtChat" rows="15" cols="80" readonly="readonly" id="txtChat" onchange="txtBas();"></textarea><br /> </div> <div id="upenvoi"> <input name="txtMsg" type="text" maxlength="200" id="txtMsg" /> <input type="submit" name="btnEnvoi" value="Envoyer" id="btnEnvoi" /> </div>

14/04/2012, 23h32
Auteur

bonsoir,

l'événement onchange() n'est appliqué uniquement si l'élément textarea perd le focus (tout comme onblur()). Il est donc normal que ta fonction txtBas ne soit jamais exécuté.

Il faut donc appeler txtBas lorsque tu mets à jour le contenu du champ, après la réponse de la requête Ajax.
15/04/2012, 09h06
zooffy

Merci pour ton aide.

Je comprends bien le principe mais je n'ai aucune idée de comment mettre en application cette notion "aprés la réponse de la requête Ajax". En fait, c'est clairement toute cette notion de temporalité qui m'échappe dans AJAX.

Une piste à suivre ?

Bon Dimanche.