Geek Answers Handbook

HTML input affecting the whole page

I am making a page where you can enter HTML and see the output in the div aside.
Code:

$("#tryit").keyup(function() { var input = $(this).val(); $("#readout").html(input); }); 
 #readout { height: 400px; width: 48%; border: 1px solid black; overflow: auto; float: right; clear: none; display: inline-block; } #tryit { height: 396px; width: 50%; float: left; clear: none; display: inline-block; font-family: monospace; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </textarea> <div id="readout"></div>

It works as it should: it outputs HTML to #readout . It is not good when the user adds the <style> to the head . Then, the added style affects not only the HTML in the text input, but also the entire page.
How to make CSS affect only user input and not the whole page?
Here is the Problem Page page .

+6
source share
2 answers

You must really use a different approach to achieve this.

If you really want to go with what you have, you will have to replace many things in the meaning of textarea. To give you an idea, in the snippet below, I replace the html and body style declarations with id ( #readout ) to apply styles to the #readout div , not the body on the page. It works for the body , but what about all the other possible declarations?

I am sure that I am a true noob when it comes to regex, and I am sure that this can be done much better, but all this is not necessary.

 $("#tryit").keyup(function() { var style = $(this).val().match(/<style>(.*)<\/style>/); if (style !== null && style.length > 0) { var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout'); } var input = $(this).val(); $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>')); }); $("#tryit").keyup(); 
 #readout { height: 400px; width: 48%; border: 1px solid black; overflow: auto; float: right; clear: none; display: inline-block; } #tryit { height: 396px; width: 50%; float: left; clear: none; display: inline-block; font-family: monospace; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt; </textarea> <div id="readout"></div>

Another problem is that the <doctype> , <html> , <head> and <body> elements in your textarea do not really exist. Take a look at the source and you will find out that they are not there, and they do not belong there. In doing so, I would say with the solution mentioned in the comment of Barmar, who suggested using iframe .

This is actually not so difficult. One quick and dirty way is to split the blob into textarea value and add this attribute to the original iframe attribute. This will even make it easier to separate your HTML and CSS with another CSS text field and enter its value as a stylesheet at the beginning of the iframe . Since I cannot use the iframe object in sn snipet tool due to security in the sandbox, check this

JSFIDDLE

and I'm sure you get this idea.

+2
source

In your css, do this where it selects your input div with a specific id, then select its children:

 <style> #readout input{ color: red; } </style>

I have added a style tag since you put css directly in your HTML editor . The above css only affects every input element in your div with read id.

If you are looking for something else, say so.

Look at this script

+2
source

More articles:


All Articles