Question

I have a plain textarea for a form submission. I want to force a line break when ENTER is pressed. Right now I can get it to recognize when ENTER e.g. keyCode 13 is pressed. But, it won’t append a line break to the outputted html. How is this done and if so, how would the <br /><br /> be hidden from the user. Thank you

    <textarea cols="50" rows="7" id="textarea"></textarea>

    <p><div id="data"></div></p>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

    <script type="text/javascript">

        $('#textarea').bind('keyup', function(e) {

            data = $('#textarea').val()
            $('#data').html(data);

            if(e.keyCode==13){
                $('#data').append('<br/><br />'); // <--- This won't work
                }

        });

    </script>

Answer 1

Try this:

$('#textarea').bind('keyup', function(e) {
    var data = $('#textarea').val();
    $('#data').html(data.replace(/\n/g,"<br />"));
});

DEMO: http://jsfiddle.net/efLxP/