Sujet Précédent Sujet Suivant

Retour à la ligne automatique + vider input

Fermé
gwadien Messages postés 1 Date d'inscription mercredi 23 avril 2014 Statut Membre Dernière intervention 23 avril 2014 - 23 avril 2014 à 23:52
 Trident - 24 avril 2014 à 04:03
Bonjour à tous,

Pour un projet perso, je suis en train de monter en compétence en javascript (mes débuts). Pour cela, je fais un simple chat sur une même page html.

Si le texte est trop long, on est obligé de scroller à l'horizontale pour voir la phrase en entière. Ainsi, comment puis-je automatique renvoyer à la ligne si le texte est trop long ?

De plus, j'aimerais vider le input lorsque ce dernier est injecté dans le tableau.

Ce qui, au final, s'apparente à un chat :)

Voici mon code HTML : 

<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
    <title>Test chat</title>
    <script src="tableau.js" charset="utf-8"></script>
</head>
    <body>
        <div id="main">
        <h2>Bienvenue sur le chat test</h2>
            <div id="tabl">
                <input type="text" autocomplete="off" id="userA" placeholder="nom de l'utilisteur A"/>
                <div style="width:220px; height:150px; overflow:auto;">
                    <table id="tableau1" style="border: 1px solid black;" >
                        <tr>
                            <td>***Minichat Test***</td>
                        </tr>
                    </table>
                </div>
                <input type="text" id="rowText1" />
                <input type="submit" value="Ajouter" onclick="addRow(document.getElementById('tableau1'), document.getElementById('tableau2'), document.getElementById('rowText1').value, document.getElementById('userA').value)" />
            </div>
                <div id="tabr">
                <input type="text" autocomplete="off" id="userB" placeholder="nom de l'utilisteur B"/>
                    <div style="width:220px; height:150px; overflow:auto;">
                    <table id="tableau2" style="border: 1px solid black;" >
                        <tr>
                            <td>***Minichat Test***</td>
                        </tr>
                    </table>
                </div>
                <input type="text" id="rowText2"/>
                <input type="submit" value="Ajouter" onclick="addRow(document.getElementById('tableau1'), document.getElementById('tableau2'), document.getElementById('rowText2').value, document.getElementById('userB').value)"  />
            </div>
        </div>
</body>
</html>


Et le fichier javascript : 


function addRow(elmt1, elmt2, value, user)
{
    var tr1 = document.createElement('tr');
    elmt1.insertBefore(tr1,elmt1.firstChild);
    var tr2 = document.createElement('tr');
    elmt2.insertBefore(tr2,elmt2.firstChild);
      
    var td1 = document.createElement('td');
    tr1.appendChild(td1);
    var td2 = document.createElement('td');
    tr2.appendChild(td2);
 
    var now = new Date();
    var heure   = now.getHours();
    var minute  = now.getMinutes();
 
    var tdText1 = document.createTextNode(user + ' ' + heure  + ':' + minute + ' > ' + value);
    td1.appendChild(tdText1);
    var tdText2 = document.createTextNode(user + ' ' + heure  + ':' + minute + ' > ' + value);
    td2.appendChild(tdText2);
 
}

Enfin le fichier CSS (si jamais vous voulez visualiser) : 

#main1 {
max-width:960px;
margin:auto;
position:relative;
}
 
#tabl {
width:250px;
position:absolute;
}
#tabr {
margin-left:250px;
min-height:500px;
}


Merci d'avance, et bonne continuation à tous !

1 réponse

Réponse 1 / 1
Trident
24 avril 2014 à 04:03
Bonsoir

Test avec dans ton CSS :
body {word-wrap: break-word;}
0

Discussions similaires

Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses
Faire un retour à la ligne sur Google Sheet
29vitruve -
eric -

7 réponses
input signal out of range
marlene -
usman000 -

14 réponses
balise de retour à la ligne en php
2I++ -
Naguez Abderraouf -

5 réponses
Google Sheet : Retour à la ligne à l'intérieur d'une formule
consgab -
Yoyo01000 -

1 réponse