Questions Tags Users Unanswered

how to modify the selected text size in a textarea element:

Question is answered.
1 answer (2 voices) (7382 views)
Tags:
HI,
I want to increase the size of font using the select option for the selected text. Also by selecting the size the selected text must be viewed in the textbox like

<font size="3">welcome</font>
Please anyone tell me how to do this.

Thanks for the reply. But still ,
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

function font(elems,tag,size){
var i=0, el, selectedText, newText;
while(el=elems[i++]){
selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
if(selectedText!=''){
    newText='<'+tag+" size="+size+'>'+selectedText+'</'+tag+'>';
        if(document.selection){//IE
        document.selection.createRange().text=newText;
        return;//prevents the double replacement
        }
        else{//Moz
        el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
        }
    }
}
}

Font size:
<select name="sizeselect" onchange="font([ques1,ques2,opt1,opt2,opt3,opt4],'font',this.value)">
 <option value="select">select</option>
 <option value="10">10</option>
 <option value="13">13</option>
 <option value="15">15</option>
 <option value="17">17</option>
 <option value="19">19</option>
 <option value="21">21</option>
 <option value="23">23</option>
 <option value="50">50</option>
</select>

The above is my code. It works fine.But when selecting the value 10 for one textarea it is working. But for another textarea also if i'm clicking the same value 10, it is not working in that.
1 Answer
Hi tweety,

You need to use content editable elements. See Example 3 on the execCommand method page.
It shows you how to implement a simple WYSIWYG (What You See Is What You Get) editor.

Also see Example 6 on the select object page.

-------------------------------------

EDIT


Textarea elements cannot contain HTML tags. Therefore it is not possible to change the font size of a part of the text in a textarea element.
A possible workaround is to use a content editable element instead. As I mentioned above, Example 3 on the execCommand method page provides a good basis for this.

"if i select the apple itself it doesn't works"
An alert is shown if the selection is changed. If you don't change the selection, no alert will be shown.

Example code for making a color palette:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        #holder {
            border: 1px solid black;
            display: inline-block;
        }
        .field {
            float: left;
            margin: 10px;
            width: 20px;
            height: 20px;
            border: 1px solid black;
        }
        .clear {
            clear: both;
        }
        #preview {
            margin-top: 30px;
            color: white;
        }
    </style>
    <script>
        function OnColorChanged (color) {
            var preview = document.getElementById ('preview');
            preview.style.color = this._color;
        }

        function CreateColorPalette () {
            var holder = document.getElementById ('holder');
            var colors = ['000000', 'ff0000', '00ff00', '0000ff'];
            for (var i = 0; i < colors.length; i++) {
                var color = '#' + colors[i];
                var div = document.createElement ('div');
                div.style.backgroundColor = color;
                div._color = color;
                div.className = 'field';
                div.onclick = OnColorChanged;
                holder.appendChild (div);
            }
                // clearfix
            var div = document.createElement ('div');
            div.className = 'clear';
            holder.appendChild (div);
        }

        function Init () {
            CreateColorPalette ();
        }
    </script>
</head>
<body onload="Init ()">
    Click on the color fields.
    <div id="holder">
    </div>
    <div id="preview">
        Sample Text
    </div>
</body>
</html>
I didn't use WYSIWYG editor.But in the example 6 also <option value="Apple" />Apple <option value="Pear" />Pear <option value="Peach" />Peach The option apple is selected in default.Again if i select the apple itself it doesn't works.i.e)It didn't show any alerts. - tweety -
Also please tell is there any code for making a color pallate in javascript. - tweety -
Please tell me is it possible to do like when clicking the A the color pallete is shown.Like this is it possible to do please tell me. - tweety -
15 30 50 per page

Your Answer

Limit of files to attach: 3 / Max total size: 1024 KB
File:
Description:
remove