CODEWITHSUNDEEP
jquerycsshtml
rah
rah

Reputation: 161

How to show a pointed bracket for a new line

I have div which is editable so I can display what is entered and for each new line I would to display a ">" symbol to show the next line.

HTML

<body>
      <div> 
            <span> &gt; </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);
   }
});

At the moment when I press enter my text is alerted, and then a new line appears but because I've hard-coded the ">" it remains in it's original location, like so:

> Some Text

Some more text

I want it to follow each new line like this:

> Some text

> Some more text

, and then remove the last symbol like so:

Some text

> Some more text

Upvotes: 1

Views: 52

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206131

Use :before pseudo for your editable DIV, and use .before() when hitting Enter to insert a non-editable DIV

var $textField = $('#textField');
var $textFieldWrapper = $('#textFieldWrapper');

$textField.on("keydown", function(e) {

  if (e.which === 13) {
    e.preventDefault(); // prevent the browser do default stuff on Enter
    
    var value = $.trim($textField.text()); // Trimmed value

    $textField.before("<pre>" + value + "</pre>"); // insert noneditable DIV with value
    $textField.html(""); // Reset value of editable element
    $textFieldWrapper.scrollTop( $textFieldWrapper[0].scrollHeight ); // Scroll wrapper
  }

});
#textFieldWrapper {
  border: 1px solid #ddd;
  height: 6em;
  padding: 8px 0;
  overflow-y: scroll;
  background: #363839;
  color: #0bf;
}

/* CLI lines */
#textFieldWrapper > pre {
  position: relative;
  min-height: 1em;    /* set some min-height */
  margin: 0;
  padding-left: 24px; /* 24px left space used for the > pointer */
}

/* CLI editable field */
#textField {
  outline: 0;
}

/* CLI editable pointer */
#textField:before {
  position: absolute;
  left: 8px;
  content: "\3e";
}
<div id="textFieldWrapper">
  <pre contenteditable id="textField">GO</pre>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Upvotes: 1

Related Questions