Use of val() in script makes me miss line breaks

Asked

Viewed 122 times

1

I have a problem. I am implementing a chat page using the following script:

<script>
        $(document).ready(function(){
                $("#enviar").click(function(){
                    var mensagem = $("#campodetexto").val();
                    var old = $("#conteudojanela").html();
                    var hora = (new Date).getHours();
                    var min = (new Date).getMinutes();
                    if(min <10)
                        min = "0"+min;
                    var sec = (new Date).getSeconds();
                    if(sec <10)
                        sec = "0"+sec;
                    var horario = hora+":"+min+":"+sec;
                    var nmsg = old + "<div class=\"user\"><div class=\"colunm01\"><p class=\"atendenteBold\">Cliente</p><p>"+horario+"</p></div><div class=\"colunm02\"><p>"+mensagem+"</p></div></div>";
                    $("#conteudo").html(nmsg);
                });
        });
        </script>

What happens is I miss all the line breaks I make when typing the text. Change the call from var mensagem = $("#campodetexto").val();for .text(); or .html(); makes me lose my value, and call replace() has not worked with exchanges between \n, \\n and/or <br>.

I know I’m doing something wrong, I just need to know what it is. I’ve searched dozens of tutorials on the internet and nothing helped me.

Thanks in advance.

------ EDIT: What I want is to type a text into the chatbox("#campodetexto"), the text goes to the chat screen("#conteudo") with all line breaks([ENTER]) that I have typed, and this has not happened. The line break is shown in the chatbox, but not in the chat window.

javascript jquery html java-ee jsp
  • 3

    Use the append, getting $("#conteudo").append($('<div>...</div>')),

  • yes. If I solve I will answer explaining what was happening and the resolution

  • I don’t understand what you want to do yet.

  • Khaosdoctor, I want that when clicking the button, the typed text goes to the chat screen with the line breaks that I type in the text field.

  • Cesar, sorry to delete my comment. It was unintentionally.

  • 2

    Look at this Fiddle I just made and tell me if that’s what you want: http://jsfiddle.net/2gys5ou1/1/

  • @Cesarmiguel, it displays the text, but does not display the line break. I type a text: "Hello. n I need help." And appears in the window: "Hello. I need help."

  • 2

    Right, I get it. I’ll see what I can do

  • If you are inserting div's, you need to ensure that the CSS organizes them so that they are not on the same line. Set the property display from CSS to inline-block can help.

  • 1

    @igorfeiden, I’ve updated it and it’s working. Now it’s just a matter of tweaking the text, but that’s basically it, right? http://jsfiddle.net/2gys5ou1/3/

  • @Renan, your suggestion didn’t work, but thank you!

  • 1

    @Cesarmiguel, It worked perfectly; thank you very much! You can reply, I will mark as resolved. Again, thank you.

Show 7 more comments

1 answer

8


What you can do is a .replace of a \n for <br /> to be interpreted correctly:

var mensagem = $("#campodetexto").val();
var text = mensagem.replace(/\r?\n/g, '<br />');

Then, instead of using the .html as you are using, just use the .append to add text to your chat:

$("#conteudo").append($('<br/><label>'+horario+': '+text+'</label>'))

Complete code:

$("#enviar").click(function(){
    var mensagem = $("#campodetexto").val();

    var hora = (new Date).getHours();
    var min = (new Date).getMinutes();
    if(min <10)
        min = "0"+min;
    var sec = (new Date).getSeconds();
    if(sec <10)
        sec = "0"+sec;
    var horario = hora+":"+min+":"+sec;

    var text = mensagem.replace(/\r?\n/g, '<br />');

    $("#conteudo").append($('<br/><label>'+horario+': '+text+'</label>'))
});

LINK Jsfiddle

  • Exactly. Thank you!

  • 2

    We’re here to help ;)

Browser other questions tagged javascript jquery html java-ee jsp

You are not signed in. Login or sign up in order to post.