Retour à la ligne automatique + vider input

gwadien Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
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 !

Afficher la suite

A voir également:

Retour à la ligne automatique + vider input
Retour à la ligne excel formule - Guide
Réponse automatique thunderbird - Guide
Partager photos en ligne - Guide
Retour à la ligne chatgpt - Forum Réseaux sociaux
Notepad++ retour à la ligne ✓ - Forum Bureautique

1 réponse

Réponse 1 / 1

Trident

Bonsoir

Test avec dans ton CSS :

body {word-wrap: break-word;}

Discussions similaires

input signal out of range

Faire un retour à la ligne sur Google Sheet

Google Sheet : Retour à la ligne à l'intérieur d'une formule

Comment faire un retour à la ligne automatique d'un texte long en php ou sql?

Aller à la ligne lors de la rédaction d'un message

Votre réponse

Discussions similaires