CODEWITHSUNDEEP
htmltextarea
isaac
isaac

Reputation: 23

HTML Text area with custom user font size style and colour

How can I create a text area in html where the user can change font style, size and colour. I have spent about an hour searching to no avail. I can find simple text boxes where users can input data, but not where they can change font size style and colour

thanks

Upvotes: 2

Views: 13428

Answers (5)

Nikunj Jagad
Nikunj Jagad

Reputation: 23

try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
  #container {width:100%; text-align:center;}

</style>
</head>

<body>
<div id="container">
<textarea name="mytextarea" cols="10" rows="10" style="font-family:comic sans ms"></textarea>
</div>
</body>
</html>

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

I think you looking for textarea (WYSIWYG) editors. You can find more by googling. Try these,

CKEditor

Demo: http://ckeditor.com/demo

TinyMCE

Demo: http://www.tinymce.com/tryit/full.php

For More, Check these links for more editors,

http://web.enavu.com/tutorials/14-jquery-and-non-jquery-rich-text-editors/

http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/

Upvotes: 2

Anurag-Sharma
Anurag-Sharma

Reputation: 4408

try this :- 

$('btn1').click(function(){
$('textarea').css("font-style","italic");
}

i think you have to create a list of buttons for each style and then change the second parameter of the css method as you want .

Upvotes: 0

Holinov Ilya
Holinov Ilya

Reputation: 33

Try using TinyMCE text editor with custom configured toolbars (you should turn off toolbar buttons that you dont need)

Upvotes: 2

Fun Mun Pieng
Fun Mun Pieng

Reputation: 6901

At the very most basic, you might need to write some javascript.

You could possibly have a dropdown that shows font size from 4px to 30px, for example. Example:

<textarea id="textarea1">test 123</textarea>
<select onchange="textarea1.style.fontSize = this.value;">
     <option value="12px" selected="selected">12px</option>
     <option value="4px">4px</option>
     <option value="30px">30px</option>
</select>

For changing background color, the onchange code would be textarea1.style.backgroundColor = this.value; with possibly values #ff0000 for red, #00ff00 for green and so on.

For changing style, you might need a few if statements such as:

if(this.value == 'u')
    textarea.style.textDecoration = 'underline';
else
    textarea.style.textDecoration = '';
if(this.value == 'i')
    textarea.style.fontStyle = 'italic';
else
    textarea.style.fontStyle = 'normal';
if(this.value == 'b')
    textarea.style.fontWeight = 'bold';
else
    textarea.style.fontWeight = '';

Though you might need to customize the code above a bit to cater for combined styles such as bold italic.

Upvotes: 1

Related Questions