Menu
I am making a page where you can enter HTML and see the output in a div to the side.
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"><!doctype html> <html> <head> <title>New Webpage</title> </head> <body> </body> </html>
</textarea>
<div id="readout"></div>It works as it should: it outputs the HTML to the #readout. What goes wrong is when a user adds a <style> tag in the head. Then the style added there affects not only the HTML in the text input, but in the entire page.
How can I make the CSS affect only the user's input, and not the entire page?
Here is the Problem Page.
501
To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute.
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below.
Use the CSS text-align Property to Center a Form in HTML We can set the value to center to center the form. For example, apply the text-align property to the form tag in the style attribute, and set the property to center . Next, create input tags with the type text and then submit .
You should really consider using a different approach to achieve this.
If you would really want to go with what you have so far you would have to replace a lot of stuff within the textarea value. Just to give you an idea, in the below snippet i am only replacing the html and body style declarations with the id (#readout) to apply the styles to the #readout div and not to the body of the page. It does work for the body, but what is with all the other possible declarations?
Sure i am a real noob when it comes to regex and i am sure this can be done a lot better, but all of 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"><!doctype html> <html> <head> <title>New Webpage</title><style>body {background: black; color: red }</style> </head> <body><h1>Hello</h1> </body> </html>
</textarea>
<div id="readout"></div>An other 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. That being said i would go with a solution mentioned in a comment by Barmar, who suggested using an iframe.
It is actually not that hard to achieve. One quick and dirty way is to crate a blob from the textarea value and add that to the source attribute of an iframe. That would make it easy to even separate your HTML and CSS by having another textarea for the CSS and injecting it's value as a style-sheet into the head of the iframe. Since i can't use the iframe thing in the SO snippet tool because of sandbox security stuff check this
JSFIDDLE
and i am sure you will get the idea.
195
In your css make it to where it selects your div input with a specific id then select its child elements:
<style>
#readout input{
color: red;
}
</style>
I added the style tag since you are putting the css directly in your html editor. The above css will only affect every input element in your div with the id of readout.
If you are looking for something different please say so
Look at this fiddle
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
