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>
Related
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.
How would I change the content of a <textarea> element with JavaScript?
I want to make it empty.
Like this:
document.getElementById('myTextarea').value = '';
or like this in jQuery:
$('#myTextarea').val('');
Where you have
<textarea id="myTextarea" name="something">This text gets removed</textarea>
For all the downvoters and non-believers:
Here's the MSDN reference
value Property: Retrieves or sets the text in the entry field of the textArea element.
Here's the MDN reference
value DOMString The raw value contained in the control.
If you can use jQuery, and I highly recommend you do, you would simply do
$('#myTextArea').val('');
Otherwise, it is browser dependent. Assuming you have
var myTextArea = document.getElementById('myTextArea');
In most browsers you do
myTextArea.innerHTML = '';
But in Firefox, you do
myTextArea.innerText = '';
Figuring out what browser the user is using is left as an exercise for the reader. Unless you use jQuery, of course ;)
Edit: I take that back. Looks like support for .innerHTML on textarea's has improved. I tested in Chrome, Firefox and Internet Explorer, all of them cleared the textarea correctly.
Edit 2: And I just checked, if you use .val('') in jQuery, it just sets the .value property for textarea's. So .value should be fine.
Although many correct answers have already been given, the classical (read non-DOM) approach would be like this:
document.forms['yourform']['yourtextarea'].value = 'yourvalue';
where in the HTML your textarea is nested somewhere in a form like this:
<form name="yourform">
<textarea name="yourtextarea" rows="10" cols="60"></textarea>
</form>
And as it happens, that would work with Netscape Navigator 4 and Internet Explorer 3 too. And, not unimportant, Internet Explorer on mobile devices.
If it's jQuery...
$("#myText").val('');
or
document.getElementById('myText').value = '';
Reference: Text Area Object
Put the textarea to a form, naming them, and just use the DOM objects easily, like this:
<body onload="form1.box.value = 'Welcome!'">
<form name="form1">
<textarea name="box"></textarea>
</form>
</body>
Here is a simple vanilla JS example that changes the textarea content on a button click.
const button = document.querySelector("#button");
const messageBox = document.querySelector("#message");
button.addEventListener("click", ()=>{
messageBox.innerText = "Please type your message here."
});
<h1>TextArea Examplw with JavaScript</h1>
<textarea id="message"></textarea>
<button id="button">Click to Change</button>
I am extracting content from an HTML textarea using JS, in order to then put it into a <div>. Now, I know the content is going to be valid HTML - so I assumed that if I set it as the innerHTML of another element it would be parsed by the browser - but it's not. I'm getting the plain string (with tags and all) on the screen.
This is basically my script:
var txt = document.getElementById("contentTextArea").innerHTML; //Get the content
document.getElementById("contentOutput").innerHTML = txt;
Here's the HTML, just to be sure:
<textarea name="content" id="contentTextArea">
<p>Text...</p>
</textarea>
What am I doing wrong? Is there another way of doing this?
Thanks!
var txt = document.getElementById("contentTextArea").value; //Get the content
Textareas support value not innerHTML. YOu should do this...
document.getElementById("contentTextArea").value;
keeping it simple and short, this is my code and I want to have the text content from the text input field to be shown in another div(showcontent)..although no jQuery error is flagging in my firebug..but still it is not showing content in the lower div, let me know what I am doing wrong ?
Also let me know the correct function for this type of functionality if keyup is not appropriate for handling this?
<form>
<input type="text" name="usertext" placeholder="Enter text" id="usertext" />
</form>
<div id="showcontent"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('#usertext').keyup(function(){
var mytext = jQuery('#usertext').text();
jQuery('#showcontent').html(mytext);
});
});
</script>
I tried jQuery('#usertext').on('keyup',function(){...}); but no help :(
There is proble in reading text from input box
use this
var mytext = jQuery('#usertext').val();
if u are using jquery to get the value of a textbox then u should always use val() method and if u want to get the text inside a span or a div u should use text() method..so u should write your code int the following way
$('#usertext').keyup(function(){
//B.T.W $(this) refers to the current element ie the textbox
$('#showcontent').text($(this).val());
});
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.