I have a div that is editable, allowing me to display the entered text. To indicate each new line, I would like to show a ">" symbol at the beginning of the line.
HTML
<body>
<div>
<span> > </span>
<div contenteditable="true" id="textField"></div>
</div>
</body>
CSS
body > div > span
{
float: left;
padding-top: 10px;
}
body > div > div
{
outline: 0;
display: flow-root;
margin-left: 15px;
padding: 10px;
}
jQuery
$('#textField').keyup(function(e)
{
if(e.keyCode == 13)
{
var inputGiven = $('#textField').text();
alert(inputGiven);
}
});
Currently, when I press enter, my text is alerted and a new line appears with the ">" symbol in its original location:
> Some Text
Some more text
I want the ">" symbol to move to the beginning of each new line like this:
> Some text
> Some more text
And then remove the last ">" symbol like so:
Some text
> Some more text