HTML/JavaScript - Ways to show text entered into an input field as HTML code

Question

HTML/JavaScript - Ways to show text entered into an input field as HTML code

One dilemma I'm facing involves a textarea element on my website where users input HTML code. My goal is to showcase this entered HTML code in a different section of the webpage. How should I approach this challenge?

The desired outcome is similar to how Stack Overflow handles HTML tags in their question text area - if a user types "this", it displays as **this** on the page. Another scenario is when a user inputs an image tag, and I would like that image to appear elsewhere on the site.

In my tech stack, I am leveraging Node and Express for the backend, using MongoDB to store user input, and incorporating ejs templates for rendering the HTML content.

javascript jquery html css node.js

Answer 1

Answer №1

$("#htmlinput").on("input",function(){
  $("#target").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="htmlinput"></textarea>
<div id="target"></div>

Answer 2

$("#htmlinput").on("input",function(){
  $("#target").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="htmlinput"></textarea>
<div id="target"></div>

Answer 3

Answer №2

Working with JavaScript

function displayText() {
  var message = document.form.input.value;
  return document.getElementById('output').innerHTML = message;
}

Implementing in HTML

<form name="form">
<textarea onkeyup="displayText()" name="input"></textarea>
<div id="output"></div>
</form>

Answer 4

Working with JavaScript

function displayText() {
  var message = document.form.input.value;
  return document.getElementById('output').innerHTML = message;
}

Implementing in HTML

<form name="form">
<textarea onkeyup="displayText()" name="input"></textarea>
<div id="output"></div>
</form>

Answer 5

Answer №3

My code snippet below showcases how I retrieve the value from a textarea using JavaScript and then display it in a div element with the id of output. This is achieved by utilizing the .innerHTML property, which is responsible for setting or returning the inner HTML content of an element.

function myInput(){
var y = document.getElementById('textarea').value;
  document.getElementById('output').innerHTML = y;    
}

*{ box-sizing: border-box; }
textarea{ width: 100%; }

#output{
  display:block;
  background:#489ae0;
  color: #fff;
  margin: 0;
  padding: 10px 20px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>
  <div id="output"></div>

Answer 6

My code snippet below showcases how I retrieve the value from a textarea using JavaScript and then display it in a div element with the id of output. This is achieved by utilizing the .innerHTML property, which is responsible for setting or returning the inner HTML content of an element.

function myInput(){
var y = document.getElementById('textarea').value;
  document.getElementById('output').innerHTML = y;    
}

*{ box-sizing: border-box; }
textarea{ width: 100%; }

#output{
  display:block;
  background:#489ae0;
  color: #fff;
  margin: 0;
  padding: 10px 20px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>
  <div id="output"></div>

HTML/JavaScript - Ways to show text entered into an input field as HTML code

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for retrieving an HTML file dynamically and using it to populate a DIV with jQuery?

Is there a way to effectively alter an object that has been assigned in a separate file?

Enhancing the appearance of text in an article by using hover effects, while ensuring the link is attached to the

ASP not recognizing AngularJS input states

Harnessing the power of external Javascript functions within an Angular 2 template

What is the process for assigning variables to modules using RequireJS?

Menu Items at the Center

Use an if-else statement in jQuery with selectors to determine if a specific div element has been added to it

Encountered an issue while installing npm dependencies for webtorrent: "Error: Unable to locate 'fs' - Fountain-Js (Yeoman)"

How to utilize dot notation in HTML to iterate through nested JSON in AngularJS?

How can I ensure that the images span the entire width of the page in ResponsiveSlides?

Guide to aligning a div element along the right edge of the webpage

Having difficulty retrieving an item from a knockout observable array

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

"The art of sending Ajax requests in combination with the powerful Code Ign

Javascript regular expressions are not functioning as expected

Ways to execute a function only once within setInterval

How do you switch selection to "hold" mode using Javascript?

The compilation of the module has encountered an error with the PostCSS loader. There is a SyntaxError at line 2, character 14 indicating an unknown

Insert text within the switch component using Material-UI