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: - <html>
-
<script>
-
function Test()
-
{
-
document.getElementById("testDiv").focus()
-
var Rng = document.selection.createRange();
-
Rng.pasteHTML("<font size=5>A</font>");
-
}
-
</script>
-
<body>
-
<div id="testDiv" contentEditable="true"></div>
-
<input type="button" onclick="Test()">
-
</body>
-
</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.
16  3681  pronerd 392
Recognized Expert Contributor @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.
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.
pronerd 392
Recognized Expert Contributor @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.
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:
----------------------------- - <html>
-
<script>
-
function Test()
-
{
-
document.getElementById("testDiv").focus();
-
var Rng = document.selection.createRange();
-
Rng.pasteHTML("<font size='5'>A</font> ");
-
}
-
</script>
-
<body>
-
<div id="testDiv" contentEditable="true" STYLE="font-size:14px;"></div>
-
<input type="button" onclick="Test()">
-
</body>
-
</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.
Dormilich 8,658
Recognized Expert Moderator Expert
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>
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.
Dormilich 8,658
Recognized Expert Moderator Expert @markjavascript
why? @markjavascript
you could make an instant previev <div>, what for those users whose browser ignores the contentEditable attribute?
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>.
Dormilich 8,658
Recognized Expert Moderator Expert
javascript simple css syntax: - // set font-size to 2em
-
// element is your <div>
- element.style.fontSize = "2em";
and because I'm in the mood.... - // making only the first letter big
-
div:first-letter {
-
font-size: 200%;
-
}
acoder 16,027
Recognized Expert Moderator MVP
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.
Markus 6,050
Recognized Expert Expert
contentEditable does work in Chrome 1.0.
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"?
Dormilich 8,658
Recognized Expert Moderator Expert
thats easy. add a new css rule - #id_of_div {
-
font-size: 14px;
-
// you might be better with relative font sizes
-
}
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?
acoder 16,027
Recognized Expert Moderator MVP
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?
Thanks a lot for all your helps.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: J |
last post by:
I've run CSSCheck on my style sheets and I always get a warning
similar to this:
"font: bold 9pt/100% sans-serif
Warning: Absolute length units should not generally be used on the Web ..."
...
|
by: Simon Wigzell |
last post by:
I'm using a 3rd party (htmlarea) WYSIWYG html editting tool. it works great
most of the time. I have a problem where I've made my own function to create
a bookmark type link. e.g. I want to turn...
|
by: Dr John Stockton |
last post by:
Assuming default set-ups and considering all reasonable browsers,
whatever that may mean, what should an author expect that his readers in
general will see (with visual browsers) for a page with...
|
by: colinhumber |
last post by:
I'm running this line of code:
oTarget.pasteHTML(formattedHtmlText);
where oTarget is a text range object.
When formattedHtmlText is, say, "<STRONG><BUTTON...
|
by: tshad |
last post by:
I am having trouble with links in my DataGrid.
I have Links all over my page set to smaller and they are consistant all
over the page in both Mozilla and IE, except for the DataGrid.
Here is a...
|
by: Sakharam Phapale |
last post by:
Hi All,
How to preserve the old font properties while changing new one?
I posted same question 2 months back, but I had very small time then.
eg. "Shopping for" is a text in RichTextBox and...
|
by: Daniel Kaplan |
last post by:
I have the item below at the top of my style sheet. And it seems that
the font-szie is ignored. I know that my linked style sheet is being
read, and used because if I remove the font-family line,...
|
by: Jason |
last post by:
Hi,
I'm developing an HTML Editor Control using VB.Net 2003 for an application
that used to use the DHTML Editor Control that is no longer supported. Well,
it's been fun but I've hit a wall with...
|
by: kheitmann |
last post by:
OK, so I have a blog. I downloaded the "theme" from somewhere and have edited a few areas to suit my needs. There are different font themes within the page theme. Long story short, my "Text Posts"...
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
| |
