Retour à la ligne automatique + vider input

gwadien Messages postés 1 Statut Membre -  
 Trident -
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
 
Bonsoir

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

Discussions similaires

input signal out of range
marlene -
usman000 -

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

7 réponses
Comment faire un retour à la ligne automatique d'un texte long en php ou sql?
Mash10 -
jordane45 -

2 réponses
Retour à la ligne tchat.
sartorius1108 -
momolapince -

5 réponses
Aller à la ligne lors de la rédaction d'un message
fididicccm -
fididicccm -

2 réponses