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

Tips for dynamically inserting JSON data into HTML elements

Incorporate pictures from the popup onto the main page

Jsonip.com is providing both internal and external IP addresses

Initializing an Express app with JSON file loading

Display several modal pop ups using AngularJS

The nightmare of Parent-Child Inheritance in JQuery/CSS is a constant struggle

"Encountering an error stating "breakpoint set but not yet bound" while debugging a node.js application

What is the best way to define a margin according to the size of the device being used

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Encountered an issue while trying to set up mocks with $route in vue-test-utils

Altering the DOM directly within the componentDidMount() lifecycle method without needing to use

A specific image is loading after being clicked in a new page

Guide to adding a file upload progress bar to your website

Submit a document through a jQuery post method in conjunction with PHP

Tips for aligning an image in the middle of a column within an ExtJS GridPanel

Learn how to create an animated refreshing icon in React when clicked

The functionality of Directive hinges on the use of a template

How come I am unable to download a particular npm version and what steps can I take to achieve it?

Updating meta tags dynamically in Angular Universal with content changes

Counting Slides in a Slick Carousel