By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,018 Members | 870 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,018 IT Pros & Developers. It's quick & easy.

pasteHTML and font size

P: 9
Hi,

In an editable div, I inserted a big letter, Rng.pasteHTML("<font size=5>A</font>");,fine. However, after that, when type in other letters, (sometimes) I got big letters with size=5.

Here is the code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <script>
  3.    function Test()
  4.    {
  5.       document.getElementById("testDiv").focus()
  6.       var Rng = document.selection.createRange();
  7.       Rng.pasteHTML("<font size=5>A</font>");
  8.    }
  9. </script>
  10. <body>
  11.    <div id="testDiv" contentEditable="true"></div>
  12.    <input type="button" onclick="Test()">
  13. </body>
  14. </html>
Please let me know If anything wrong in the code.

What I tested by this code is:
Type ABC, click the button, the big A appears, press Return, put the cursor immediately after the big A, then type a letter and this letter is a big letter!

Any helps would be appreciated.
Dec 17 '08 #1
Share this Question
Share on Google+
16 Replies


Expert 100+
P: 392
@markjavascript
That is not a bug. Just about every rich text editor will do that. I have the same problem with MS Word. If the cursor is placed next to that text it will be counted as inside the tags so it will have the style of those tags. You could try adding a space after the closing tag so that it will not treat the cursors location as inside the tag.
Dec 17 '08 #2

P: 9
Thank you.
The problem is that I cannot disallow the user type a letter next to the big letter and there is no way to recover the font size since my div's font size is in px.
Dec 17 '08 #3

Expert 100+
P: 392
@markjavascript
Sure you can. As I just explained you could add a space after the closing tag so the cursor would not end up beside the letter(s). Or you could set an onChange event for the field and check to see if the currsor is next to your tag. If it is then move it over a space or two.





@markjavascript
I do not understand what you mean. First off you are not setting your font size in px. You are not including any label for the attribute at all. Secondly your HTML syntax is incorrect you should have quotes around all of your attributes. Thirdly all you have to do to get the font size is to read the size attribute of the font tag.
Dec 17 '08 #4

P: 9
In the div, I use STYLE="font-size:14px;" while in the javascript use ("<font size='5'>A</font> ".I include the font size in the div now:
-----------------------------
Expand|Select|Wrap|Line Numbers
  1. <html> 
  2. <script> 
  3.    function Test() 
  4.    { 
  5.       document.getElementById("testDiv").focus();
  6.       var Rng = document.selection.createRange(); 
  7.       Rng.pasteHTML("<font size='5'>A</font> "); 
  8.    } 
  9. </script> 
  10. <body> 
  11.    <div id="testDiv" contentEditable="true" STYLE="font-size:14px;"></div> 
  12.    <input type="button" onclick="Test()"> 
  13. </body> 
  14. </html>
-----------------------
Thank you for telling me the mistakes in my first code. Please check this code as well.

Adding a space is a good idea, but, after tested, I found the user can still put the cursor immediataly after the big letter or just delete the space, and then the problem still exists.
Dec 17 '08 #5

Dormilich
Expert Mod 5K+
P: 8,639
some general remarks
- don't use <font> tags, these are deprecated quite a long time now, if you need to change the font size, use CSS
- contentEditable is not a valid attribute (looke like IE syntax), if you need to edit block text use <textarea>
Dec 17 '08 #6

P: 9
Dormilich,

Thank you.
I think we cannot use css for the font size in pasteHTML("<font size='5'>A</font> ")
Yse <textarea> is very good, but it is not "rich", we cannot display subscript for example.
Dec 17 '08 #7

Dormilich
Expert Mod 5K+
P: 8,639
@markjavascript
why?

@markjavascript
you could make an instant previev <div>, what for those users whose browser ignores the contentEditable attribute?
Dec 18 '08 #8

P: 9
Thank you.

Do you think we can use css for the font size in pasteHTML("<font size='5'>A</font> ")? Anyway, I will try again.

In my website, only 1% visitors not use IE. I will let them select <textarea> or <div>.
Dec 18 '08 #9

Dormilich
Expert Mod 5K+
P: 8,639
javascript simple css syntax:
Expand|Select|Wrap|Line Numbers
  1. // set font-size to 2em
  2. // element is your <div>
  3. element.style.fontSize = "2em";
and because I'm in the mood....
Expand|Select|Wrap|Line Numbers
  1. // making only the first letter big
  2. div:first-letter {
  3.   font-size: 200%;
  4. }
Dec 18 '08 #10

acoder
Expert Mod 15k+
P: 16,027
You can use designMode in Firefox and other browsers by setting it to "on". This would set the whole document, so you would need to use an iframe. See Midas - MozillaZine Knowledge Base

In newer versions of Firefox (3 onwards), you can use contentEditable to apply to a single element. It should also be supported by Opera/Safari - not sure about Chrome.

To see an example of its use (using an iframe), see contentEditable.
Dec 18 '08 #11

Markus
Expert 5K+
P: 6,050
contentEditable does work in Chrome 1.0.
Dec 18 '08 #12

P: 9
To all the experts above,

If my problem may not be solved, can we think another way:
a javascript function that says "all the typed in letters for the DIV will be with font-size=14px"?
Dec 18 '08 #13

Dormilich
Expert Mod 5K+
P: 8,639
thats easy. add a new css rule
Expand|Select|Wrap|Line Numbers
  1. #id_of_div {
  2.   font-size: 14px;
  3. // you might be better with relative font sizes
  4. }
Dec 19 '08 #14

P: 9
Thank you.
Can I put you code into a function setFont('14px')?
However, even I can put into the function setFont('14px'), do you think
pasteHTML("<font size='5'>A</font>");setFont('14px');
will solve my problem?
Dec 20 '08 #15

acoder
Expert Mod 15k+
P: 16,027
You can either set elem.style.fontSize or set the class of the container. What you're attempting to avoid is expected behaviour. If you did want to type more things at the larger font size, where would you put the cursor?
Dec 23 '08 #16

P: 9
Thanks a lot for all your helps.
Dec 23 '08 #17

Post your reply

Sign in to post your reply or Sign up for a free account.