I want to have 1 main textarea where you can type anything and it will, in real-time, update on multiple textareas showing the typed letters in different fonts.
example:
Main text area:
<textarea id="textField0" autocomplete="off" style="font-family:'Alex Brush';"
onkeyup="javascript:setFontText(this.value);" rows="2" name="textField0"></textarea>
Multiple text area:
<textarea id="Courier new" class="fontTextArea2" style="font-family:courier_newregular;"
autocomplete="off" name="Courier new"></textarea>
<textarea id="Arial Black" class="fontTextArea2" style="font-family:arialblack; "
autocomplete="off" name="Arial Black"></textarea>
How do i go about writing javascript for setFontText()?
Thanks!
You could do something like this:
function setFontText(text) {
document.getElementById("Courier_new").innerHTML = text;
document.getElementById("Arial_Black").innerHTML = text;
}
I would also suggest you change your ids to something that doesn't contain white spaces.
Example: http://jsfiddle.net/3Lq0ykyk/1/
Ive taken the event handler from inline to javascript, Just make the font's you want in css
var areatwo=document.getElementById('two');
var areathree=document.getElementById('three');
document.addEventListener('keydown',setFontText);
document.addEventListener('keyup',setFontText);
function setFontText(){
var textareavalue=document.getElementById('one').value;
areatwo.value=textareavalue;
areathree.value=textareavalue;
}
#two{font-family:courier_newregular;}
#three{font-family:arialblack; }
<textarea id="one"></textarea>
<textarea id="two"></textarea>
<textarea id="three"></textarea>
Related
how can I reset multiple textareas to their default values (texts)? Is it possible without giving them specific class? I found only solution for one text input, but no successful with multiple textareas on 1 page, reseted by function.
<html>
<body>
<textarea rows="1" cols="30">Hello World</textarea><br/>
<textarea rows="1" cols="30">Hello Second World</textarea><br/>
<button onclick="reset()">Reset</button>
<script>
function reset() {
document.querySelectorAll('textarea').value = <!--Default Value-->
}
</script>
</body>
</html>
How about something like this?
Address:<br>
<textarea id="myTextarea">
342 Alvin Road
Ducksburg</textarea>
<textarea id="myTextarea2">
Value 2</textarea>
<p>Click the button to change the contents of the text area.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myTextarea").value = "Txt1";
document.getElementById("myTextarea2").value = "Txt2";
}
</script>
Edit to match the use case in the comment
According to MDN, textarea does not have a value property.
When the page loads the default value for a textarea is whatever the value in between some value. Therefore when the user changes it we don't have a way to find the original value.
To Overcome that we need somekind of a mechanism to store the default value
In your case if you have a lot of elements (Textareas), using a data attribute will help us to identify the default value after the page loads and the user changes the values
So use the following example
<textarea rows="1" cols="30" data-default="Default Val">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val1">Hello World</textarea><br/>
<textarea rows="1" cols="30" data-default="Default Val2">Hello World</textarea><br/>
<button onclick="reset()">Reset</button>
<script>
function reset() {
var textareas = document.querySelectorAll('textarea');
for(i =0; i < textareas.length; ++i){
textareas[i].value = textareas[i].getAttribute('data-default');
}
}
</script>
You need to modify the js script like below:
function reset() {
document.querySelectorAll('textarea').forEach((elem) => elem.value = "Desiered value");
}
Or you can use an HTML placeholder and make the textarea value empty.
I am currently working on a project for a introductory javascript and html class, and I am trying to figure out how to make it so that the text a user enters into a text box converts to all uppercase letters after clicking a button. Here is what I have so far (i know it is ugly but it just needs to work) , I am just having trouble figuring out my problem. :
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = ("text");
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
Looks like you just need to replace var text = ("text"); with var text = document.getElementById('text').value;
The full working code:
<html>
<body>
<p> Enter any text into the field below and click "Convert" and it will make
every letter Upper Case. </p>
<form>
<input type="text" id="text" value="">
<input type="button" value="Convert" onclick="thefunction()">
</form>
<p id="lowercase"></p>
<script>
function thefunction(){
var text = document.getElementById('text').value;
var conv = text.toUpperCase();
document.getElementById("lowercase").innerHTML = conv;
}
</script>
</body>
</html>
I suspect what you were doing wrong was trying to use var text = document.getElementById('text') and then trying to change that to upper case.
If you attempt this, you're actually attempting to apply the function toUpperCase to a HTMLInputElement and you'll get a console error as a result.
You just need to apply the toUpperCase function to the string value held within the HTMLInputElement called text by accessing it's value with var text = document.getElementById('text').value;
I created one multi line text box.In that text box every time some remarks should be added with the different users. But existing content would not change or delete. The new text should add with that text box.
I tried the many ways to do this. But i can't find any one idea. People please help me to fix this issue.
<%: Html.TextArea("Remark", Model.Remarks, new { #maxlength = "400" })%>
This is just an example. Its better to have an input below the text area to get the text from to append and then clear it once appended, but you get the gist. It requires jquery.
(function($){
$.fn.extend({
valAppend: function(text){
return this.each(function(i,e){
var $i =$('#remark')
var $e = $('#comment');
$i.val($i.val() +'\n' + $e.val());
});
}
});
})(jQuery);
$('#append').click(function(){
$('textarea').valAppend();
$('#comment').val('');
$('textarea').attr('readonly','readonly');
});
textarea, input{display:block;}
#remark{height:100px; width:200px;border: 1px solid black}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="remark"></textarea>
<input type="text" id="comment" placeholder ="enter commment"></input>
<input type="button" id="append" value="append" />
I have a table of element, and when i click on a td, i show something on atextarea
the problem is when i click, nothing show on the textarea...
what i actually do is that :
td.onclick = (function(textToShow){
return function(){
var textArea = document.getElementById("modification_bloc");
textArea.value = textToShow;
}
})(structure[key])
HTML code (is .ejs)
<form id="modification_bloc" action="modification_bloc" name="modification_bloc" class="hidden" type="post">
<textarea name="contenu_bloc" id="contenu_bloc"></textarea>
<br />
<input type="submit" value="Sauvegarder modifications"/>
</form>
the problem is that my textarea is always empty....
If i do a console.log of "textToShow" i have the text, and if i add the text as a placeholder i can see it in the console but not on the textarea. The innerHTML method works, but the text is obviously not editable รง^^
I don't get what is wrong.
can you help me? without JQUERY :)
Heres the particular html code, which consists of the button 'bold' and the text area.
<form name="myform">
< input type="button" onClick="Bold()" value="Bold">
</form>
<textarea name="myTextArea" id="myTextArea" cols="100" rows="14" placeholder="Enter Text Here ...">< /textarea>
Heres My Javascript
function Bold() {
myTextArea.document.execCommand('bold',false,null);
}
What am i doing wrong ????
You can simply use javascript like this:
function Bold() {
document.getElementById("myTextArea").style.fontWeight = 'bold';
}
Demo
If you want the textarea to display bold text, you can do that via css style attribute:
<textarea style="font-weight: bold">test-text</textarea>
Also, you can use div insted, and set contenteditable="true" http://jsfiddle.net/XNkDx/2852/ And, use hotkey ctrl+b
UPDATE:
If you want to use button, just, get selected text and change it http://jsfiddle.net/XNkDx/2859/
I Think you should use string.bold() function of javascript like this one:
function Bold() {
var str = document.getElementById('myTextArea').value();
var result = str.bold();
}
or you can use css style
{font-weight:bold;}