Setting a text to Bold in a textarea - javascript

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;}

Related

Multiple textareas

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.

Can't add text to textarea on click

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 :)

javascript real-time update from 1 text area to multiple textarea

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>

Send textarea content to javascript function

Ok so I got a textarea and a link (which works as a button) and what I am trying to do is that when I click on the link, it sends the content from the textarea to a javascript function.
Something like this...:
<textarea name="text" placeholder="Type your text here!"></textarea>
Send!
Just assign an id to your textarea, and use document.getElementById:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
Alternatively, you could instead change your myFunction function, to make it define the value inside the function:
JS:
function myFunction() {
var value = document.getElementById('myTextarea').value;
//rest of the code
}
HTML:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
And if you're using jQuery, which it does look like you do, you could change the document.getElementById('myTextarea').value to $('#myTextarea').val(); to get the following:
JS:
function myFunction() {
var value = $('#myTextarea').val();
//rest of the code
}
HTML:
<textarea name="text" placeholder="Type your text here!" id="myTextarea"></textarea>
Send!
you can do simply like this to achieve it, just call function and do all work in that function:
Send
Jquery code:
function myFunction()
{
var text = $('textarea[name="text"]').val();
// use text here
return false;
}

Bold selected text in text area using java script

Simply tying to bold selected text within the text area
Here my code :
<script type="text/javascript">
function Bold() {
document.getElementById('firstTextarea').value = 'bold';
</script>
HTML:
<textarea id="firstTextarea" rows="12" cols="40"></textarea>
<button onclick="Bold();">Bold</button>
You are setting the value attribute of that Textarea field. What you want to set is the font-weight attribute which is done like this:
document.getElementById('firstTextarea').style.fontWeight = 'bold';

Categories