Change <pre> block contents upon textarea update - javascript

I'm trying to get contents between the <pre>...</pre> tag to be rendered by JavaScript, where the contents is dynamic. What I hope to do is to type an input within a textarea to update display in the <pre> tags.
I'm unsure how to specify the contents within the <pre> tags to take the value from textarea on every textarea update.
Many Thanks!

Seeing the code you're working with would help greatly, but if I'm reading correctly, this should help. Assuming HTML like this:
<textarea id="type"></textarea>
<pre id="output"></pre>
This option uses pure javascript:
var textarea = document.getElementById('type'),
pre = document.getElementById('output');
if(textarea.addEventListener) {
textarea.addEventListener('keyup',function(){
pre.textContent = this.value;
});
} else {
textarea.attachEvent('onkeyup',function(){
pre.textContent = this.value;
});
}
This code block uses the jQuery library for brevity:
$('#type').on('keyup',function(){
$('#output').text($(this).val());
});
Note that in both situations, I am setting the text of the <pre>, not the HTML. This allows you to enter HTML characters like < into the textarea and have them be properly escaped in your <pre> element.
Pure JavaScript Demo
jQuery Demo
If you don't wish to change the <pre> until after you leave the <textarea>, then just change 'keyup' and 'onkeyup' to 'change' and 'onchange' respectively.

Bind the onchange event to the input, and then simply copy its value to pre:
<pre id="pre">Type something</pre>
<textarea id="text" rows="20" cols="20" />
​
<script type="text/javascript">
document.getElementById("text").onchange = function () {
document.getElementById("pre").innerHTML = this.value;
};
</script>
DEMO.​

Related

Convert HTML tags and display as styled text using javascript

I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!
Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>
I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>
I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)
The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.

Live render of text in a textarea

I would like to make a textarea and a div near it similar to what you use in the "ask question" page here in stackoverflow.
You type a text in the textarea and the text is rendered live under the textarea.
I'd like to make this to convert "live" some codes like "a024" typed in the textarea to symbols in the div.
Do I need to use javascript to get this feature?
Thanks.
Yes. That was called DHTML for Dynamic HTML at the beginning of JavaScript.
You will have to use Javascript to create this behavior.
You can get the value of an element with something like:
var source = document.getElementById("sourceTextarea").value;
and set text in a destination element with something like:
document.getElementById("destinationDiv").innerText = "some text";
In your HTML you will have to use :
<textarea id="sourceTextarea"></textarea><div id="destinationDiv"></div>
You will definitely need Javascript to achieve this goal.
You can make use of the 'onkeyup' property of the textarea to bind a javascript function the keyup event.
Once you do this, you can process the texarea value to replace whatever you need to.
function updateMyDiv() {
var myTextarea = document.getElementById("myTextarea");
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = myTextarea.value;
}
<html>
<body>
<textarea id="myTextarea" onkeyup="updateMyDiv()">
</textarea>
<div id="myDiv">
</div>
</body>
</html>

How to create single-line text input field?

I have contenteditable input field on my web page. What do I need to do to make it transform multi-line text into single-line, for example just like google does if you copy large amount of text into the search field?
Example - I copy such text:
This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
And when I paste it into my contenteditable input field, I want to get:
This is Random text, lalalalalalala and it's multi-line, but that's just now what I want.
-> entire text in one row
Use the following CSS on the element:
white-space:nowrap;
You should use the input tag like this: <input type="text"/>.
This is how I did it:
$('#paste').click(function(){
$(this).html('');
});
$('#paste').focusout(function(){
$(this).html($(this).text().replace('/n', ''));
});
Have a look at the full JSFiddle code demo
Use a text input. This is single line text field and will automatically remove line-breaks.
<input name="mySingleLineTextField" type="text" />
If you must use a textarea then you can easily format its value to remove tabs and line-breaks with a little bit of JavaScript:
<textarea name="myMultiLineTextFieldWithFormattingRemoved" onchange="this.value=this.value.replace(/([\n\r\t]+)/g, ' ')"></textarea>
eg: http://jsfiddle.net/z2rmxj4j/
As its not good form to put your scripts inline here's a little example that listens for a keyup event on all textareas that have the class 'nobreaks':
(function(){
//select all textareas having the class of 'nobreaks'
var elems = document.querySelectorAll("textarea.nobreaks");
//for each element in our collection
for(i=0; i<elems.length; i++){
//attach a function to the keyup event
elems[i].onkeyup = function(){
this.value=this.value.replace(/([\n\r\t\s]+)/g, ' ');
}
}
})()
pre {color:grey}
input, textarea {display:block; width:300px; margin:10px;}
.nobreaks {}
.nowrap {white-space:nowrap;}
<pre>This is Random text, lalalalalalala
and it's multi-line,
but that's just now what I want.
</pre>
<input type="text" value="Will replace line-breaks, text cannot wrap." />
<textarea>Default.
Wont replace line-breaks and text can wrap.</textarea>
<textarea class="nobreaks">Will replace line-breaks but text can still flow/wrap.</textarea>
<textarea class="nobreaks nowrap">Will replace line-breaks and prevent the text from wrapping.</textarea>
See https://developer.mozilla.org/en/docs/Web/HTML/Element/Input for more info on the input types.
var text = "This had line\n breaks\n in it.";
text = text.replace(/(\r\n|\n|\r)/gm,"");
alert(text);

Alter HTML real-time with input tag

How can I can I alter (change, add, whatever) HTML/text real-time using the input tag? Very similar to the preview interface when asking a question on Stack Overflow minus the code encoding. It just has to be simple.
For example,
<input type="text" name="whatever" />
<div id="example"></div>
Whatever text is entered in the above input tag is added to #example in real-time.
Something involving innerHTML and JavaScript perhaps?
You can do this with jQuery
$('input').keyup(function(){
var a = $(this).val();
$('#example').text(a);
});
Example: http://jsfiddle.net/5TnGT/
There are many other ways to change content than described in the previous answers. Listen for all of them and update realtime. Requires jQuery supporting the newer .on() event handling for this example. Can also use .bind() or .live() with appropriate syntax.
$(document).ready(function() {
$(document).on('keyup propertychange input paste', 'input', function() {
$('#example').text($(this).val());
});
});
The second $(document) can be made more specific depending on the markup of the rest of your page.
See also: http://jsfiddle.net/DccuN/2/
Yes javascript will do this. Have a look at on key up. Then either innerHTML as you say or jQuery makes things a bit easier with .append or .html or .text
(Damn too slow)
Plain JavaScript solution (you won't need any sophisticated lib if you don't get too fancy elsewhere):
<input type="text" onkeypress="document.getElementById('example').innerHTML=this.value;" name="whatever" />
<div id="example"></div>
You can bind to the keyup event. Then set the div contents to that of the input.
http://jsfiddle.net/wYqgc/
var input = document.getElementsByTagName('input')[0];
var div = document.getElementById('example');
input.onkeyup = function() {
div.innerHTML = this.value;
};
You can start with this:
input.onkeyup = function () {
output.innerHTML = this.value;
};
Live demo: http://jsfiddle.net/P4jS9/

get innerhtml textarea

on site sample question
HTML
<textarea id="txt"></textarea>
<input type="button" value="click me" onclick="clk();" id="btn"/>
this text area is a ckeditor
SCRIPT
function clk()
{
alert($("#txt").html());
alert($("#txt").val());
alert($("#txt").text());
// alert($("#txt").innerhtml());
}
$(document).ready(function(){
editor = CKEDITOR.replace( 'txt',{language : 'en',on :{}} );
});
this code alert ' ' how can get innerhtml txt??
on site smaple question
Edit
when edit txt and click on btn then val() alert' '
The textarea is replaced by an iframe ( in a textarea I don't think you can put image ).
This seems to be an answer about how to get content from cke iframe : Get CKEditor content? - jQuery
Try this it will alert something if you have anything in the textarea. Since it is an input element it will have value property so just use val() method.
$("#txt").val();
you have to use getData() to get the innerhtml from CKEditor
click here
$('#txt).val(); works only for simple textarea. And you want to text CKEditor-textarea. See here stackoverflow.com/questions/4826036/get-ckeditor-content-jquery. Looks like your question is related to it.
to get inner text of textarea like .html() method you can use this code to replace \n with
$("#txt").val().replace('\n',"<br />");

Categories