locked
How to make each message in a new line in the conversation box? RRS feed

  • Question

  • User-2071692902 posted

    Hi there,

    I am making a very simple chat app' here the code 

    <div style=" text-align: center ;">
            <label style="color:blue; ">Conversation</label><br>
            <textarea style=" display: block;margin-left: auto;
        margin-right: auto;"  rows=" 3" cols=" 50" id="conBox"> </textarea>
            <br >
             <label style="color:blue; ">Write your Username</label><br>
            <input style="color:red;" type="text"  maxlength=" 10"id="myUserName">
            <br >
             <label style="color:blue; ">Write your message</label><br>
             <input style="color:black;"type="text" maxlength=" 10000"id="myInput">
             <input type="button" onclick="sendFunction()" value=" Send">
     <script>
         function sendFunction() {
             var userName = document.getElementById("myUserName");
             var src = document.getElementById("myInput");
             var dest = document.getElementById("conBox");
             dest.value = userName.value + ":" + src.value;
             document.getElementById('myInput').value = ""; 
             document.getElementById("myInput").focus();
         }
    </script>
            <input type="reset" >
        </div>

    And now I have met two things that I could have sove then 

    1-How to make each message in a new line in the conversation box?

    2-How can I color username with red and message with black in the conversation box?

    Thankfor any help will be appreciated.

    Friday, October 26, 2018 2:05 PM

Answers

  • User839733648 posted

    Hi Omanxp45-1,

    1-How to make each message in a new line in the conversation box?

    I suggest that you could just add "+" and "\n" when you add your text of input to the textarea.

    For more, you could refer to the code below.

        <div style=" text-align: center ;">
            <label style="color:blue; ">Conversation</label><br>
            <textarea style=" display: block;margin-left: auto; margin-right: auto;" rows=" 3" cols="50" id="conBox"></textarea>
            <br>
            <label style="color:blue; ">Write your Username</label><br>
            <input style="color:red;" type="text" maxlength=" 10" id="myUserName">
            <br>
            <label style="color:blue; ">Write your message</label><br>
            <input style="color:black;" type="text" maxlength=" 10000" id="myInput">
            <input type="button" onclick="sendFunction()" value=" Send">
            <script>
                function sendFunction() {
                    var userName = document.getElementById("myUserName");
                    var src = document.getElementById("myInput");
                    var dest = document.getElementById("conBox");
                    dest.value += userName.value + ":" + src.value + "\n";              
                    document.getElementById('myInput').value = "";
                    document.getElementById("myInput").focus();
                }
            </script>
            <input type="reset">
        </div>

    result:

    How can I color username with red and message with black in the conversation box?

    Textarea is a standard HTML element and so was invented just after the dawn of time.

    Unfortunately this means it is limited in it's appearance and functionality.

    Any CSS text-related property will affect the whole text within the textarea.

    So if you want to change the color of the textarea, the color of the text will always be the same.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 3:07 AM

All replies

  • User839733648 posted

    Hi Omanxp45-1,

    1-How to make each message in a new line in the conversation box?

    I suggest that you could just add "+" and "\n" when you add your text of input to the textarea.

    For more, you could refer to the code below.

        <div style=" text-align: center ;">
            <label style="color:blue; ">Conversation</label><br>
            <textarea style=" display: block;margin-left: auto; margin-right: auto;" rows=" 3" cols="50" id="conBox"></textarea>
            <br>
            <label style="color:blue; ">Write your Username</label><br>
            <input style="color:red;" type="text" maxlength=" 10" id="myUserName">
            <br>
            <label style="color:blue; ">Write your message</label><br>
            <input style="color:black;" type="text" maxlength=" 10000" id="myInput">
            <input type="button" onclick="sendFunction()" value=" Send">
            <script>
                function sendFunction() {
                    var userName = document.getElementById("myUserName");
                    var src = document.getElementById("myInput");
                    var dest = document.getElementById("conBox");
                    dest.value += userName.value + ":" + src.value + "\n";              
                    document.getElementById('myInput').value = "";
                    document.getElementById("myInput").focus();
                }
            </script>
            <input type="reset">
        </div>

    result:

    How can I color username with red and message with black in the conversation box?

    Textarea is a standard HTML element and so was invented just after the dawn of time.

    Unfortunately this means it is limited in it's appearance and functionality.

    Any CSS text-related property will affect the whole text within the textarea.

    So if you want to change the color of the textarea, the color of the text will always be the same.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 29, 2018 3:07 AM
  • User-2071692902 posted

    Great it works. Thanks alot.

    But is there another tool instead of"textarea" that accept coloring words in side it?

    Monday, October 29, 2018 12:04 PM
  • User839733648 posted

    Hi Omanxp45-1,

    But is there another tool instead of"textarea" that accept coloring words in side it?

    There are several JavaScript options(Text editor) for this, you could refer to:

    Best Regerds,

    Jenifer

    Wednesday, October 31, 2018 1:57 AM