Steps to display an angled bracket to indicate a line break

Question

Steps to display an angled bracket to indicate a line break

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> &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);
   }
});

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

jquery css html

Answer 1

Answer №1

Utilize the :before pseudo-element for your editable DIV, and employ .before() when pressing Enter to add a non-editable DIV

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

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

  if (e.which === 13) {
    e.preventDefault(); // stop the browser from default Enter behavior
    
    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>

Answer 2

Utilize the :before pseudo-element for your editable DIV, and employ .before() when pressing Enter to add a non-editable DIV

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

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

  if (e.which === 13) {
    e.preventDefault(); // stop the browser from default Enter behavior
    
    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>

Steps to display an angled bracket to indicate a line break

HTML

CSS

jQuery

Answer №1

Similar questions

Issue with CSS 3 gradient compatibility in Internet Explorer 8

What is the best method for managing file storage and retrieval in web applications that only run on the client-side?

I am attempting to create basic animations using css, but I'm having some trouble

All you need to know about the properties of CSS ul

Odd Behavior when altering button attribute using Jquery

Filtering dynamically generated table rows using Jquery

Troubleshooting problem with div width in Outlook causing table cell padding issue for curved corners on another div

Applying the 'overflow: scroll' property creates a scroll bar that remains fixed and cannot be scrolled

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

An HTML attribute that functions like autofocus in the select tag

Is there a way to interact with a Bootstrap 5 dropdown in React without triggering it to close upon clicking?

Iterate through the list of objects and display duplicates only once

Steps to display a JSX component stored in a variable

The controller and node js request associated are invisible to my HTML page

Show the button's value in the textbox and update the selected button's color using JavaScript

What is the best way to eliminate HTML <li> bullets using codebehind?

Using AJAX, extract URL parameters and retrieve corresponding data from MySQL database

How to keep jQuery horizontal submenu open when clicking on the menu

Error Alert: The index "dateform" is not defined

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has