Javascript - .innerHTML - Displaying Text format Correctly

Question

Rather New to javascript and hoping that I've come to the right place.

Currently I am trying to make a button that will place specific formatted text in a text box, however I am unsure on how to make the text keep its format.

I would like to be able to include elements like p /p and b /b in the text.

Example how I'd like to see it:
Customer is having problems,
please proceed to the location and repair the service

Javascript:

function myFunction() {
document.getElementById("textbox").innerHTML = "Customer is having problems, please proceed to the location and repair the service ";
  var oTextbox1 = document.getElementById("textbox"); 
oTextbox1.focus(); 
oTextbox1.select(); 
document.execCommand('copy')
}

Any help on this would be greatly appreciated.

Hodrobond · Accepted Answer · 2017-05-24 19:58:52Z

3

If you use innerHTML then html gets rendered, if you use innerText then it is left unrendered

Considering input can't contain HTML You might want to look into contenteditable. Related question

document.getElementById("test1").innerHTML = "<b>Bolded?</b>";
document.getElementById("test2").innerText = "<b>Bolded?</b>";

<div id="test1" contenteditable></div>
<div id="test2" contenteditable></div>

edited May 24, 2017 at 19:58

answered May 24, 2017 at 19:39

Hodrobond

1,69417 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Patrick Johnston Over a year ago

Thank you, but it doesnt appear to work for me, my button is placing directly into a text box not an open div. could that be the problem?

Hesein Burg Over a year ago

document.getElementById("textbox").innerHTML = "Customer is having problems,<BR/> please proceed to the location and repair the service "; Use html in that string, you can't.

Hodrobond Over a year ago

You can't put HTML in the input field

Hodrobond Over a year ago

@PatrickJohnston Updated my example with contenteditable. The input itself can't have HTML but you can make something (which can have html) editable!

Collectives™ on Stack Overflow

Javascript - .innerHTML - Displaying Text format Correctly

1 Answer 1

4 Comments

Linked

Hot Network Questions