473,563 Members | 2,653 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Please help: typing in contentEditable area

I like to see following to happen:

When typing a number of 1 to 4 immediately after an alphabetic letter,
it would become corresponding superscript. But if the user leaves a
space after the letter, then types a number, or in any other way, it
will not change to superscript, but appear in regular size.

The superscripts are to indicate the tones of Chinese language. My
skills are very amateur. I greatly appreciate any help or hint.

Following is a part of my code. It doesn't work at all.

<head>
<script type='text/javascript'>

function sup () {
var a;
document.write ('<sup>' + a + '</sup>');
}
</script>
</head>
<body>

<div contentEditable >
Start to type here.
</div>

</body>
</html>

Following is the url:
http://www.pinyinology.com/pinyin/content.html

Thanks in advance.
Dung Ping

Sep 21 '05 #1
2 1672

Dung Ping <du*******@yaho o.com> wrote in message news:11******** **************@ g44g2000cwa.goo glegroups.com.. .
I like to see following to happen:

When typing a number of 1 to 4 immediately after an alphabetic letter,
it would become corresponding superscript. But if the user leaves a
space after the letter, then types a number, or in any other way, it
will not change to superscript, but appear in regular size.

The superscripts are to indicate the tones of Chinese language. My
skills are very amateur. I greatly appreciate any help or hint.

For the sake of portability, I would recommend the user types into a textarea,
with the formatted output appearing in a div.
Here's a rough example of what I mean:

<HTML>
<BODY>
<FORM name='user'>
Type here<BR>
<textarea name='userText' cols='40' rows='8' >(Inoperative )</textarea>
</FORM>
Output Here<BR>
<div id='chinkText' style="padding: 1em;width:50%;h eight:200px;bac kground-color:blue; color:#ffffff">
</div>
<SCRIPT type='text/javascript'>

var divRef="", textRef=documen t.forms.user.us erText;

if(document.get ElementById
&& (divRef=documen t.getElementByI d('chinkText')) !=null
&& document.body && document.body.i nnerHTML
)
{
textRef.onkeyup =addTone;
textRef.value=" ";
}

function addTone()
{
divRef.innerHTM L=textRef.value .replace(/([a-z])([1-4])([\b\W])/gi,"$1<SUP>$2</SUP>$3");
}
</SCRIPT>
</BODY>
</HTML>

--
Stephen Chalmers http://makeashorterlink.com/?H3E82245A

Sep 22 '05 #2
I ran the program. It is a very interesting design. Thanks a lot. The
superscript for tone in it is always 2, no others. I tried to modify
the code, but my knowledge on Javascript is too limited to make it.

What has been in my mind is a simple word processor, similar to NotePad
but simpler, so data can be entered directly into a single area. The
area created with the div contentEditable tag looks more suitable for
this task, if the superscripts for tone marks can be displayed. If
anybody knows how to do it, please lend a hand.

Thanks again.
Dung Ping

Stephen Chalmers wrote:
Dung Ping <du*******@yaho o.com> wrote in message news:11******** **************@ g44g2000cwa.goo glegroups.com.. .
I like to see following to happen:

When typing a number of 1 to 4 immediately after an alphabetic letter,
it would become corresponding superscript. But if the user leaves a
space after the letter, then types a number, or in any other way, it
will not change to superscript, but appear in regular size.

The superscripts are to indicate the tones of Chinese language. My
skills are very amateur. I greatly appreciate any help or hint.

For the sake of portability, I would recommend the user types into a textarea,
with the formatted output appearing in a div.
Here's a rough example of what I mean:

<HTML>
<BODY>
<FORM name='user'>
Type here<BR>
<textarea name='userText' cols='40' rows='8' >(Inoperative )</textarea>
</FORM>
Output Here<BR>
<div id='chinkText' style="padding: 1em;width:50%;h eight:200px;bac kground-color:blue; color:#ffffff">
</div>
<SCRIPT type='text/javascript'>

var divRef="", textRef=documen t.forms.user.us erText;

if(document.get ElementById
&& (divRef=documen t.getElementByI d('chinkText')) !=null
&& document.body && document.body.i nnerHTML
)
{
textRef.onkeyup =addTone;
textRef.value=" ";
}

function addTone()
{
divRef.innerHTM L=textRef.value .replace(/([a-z])([1-4])([\b\W])/gi,"$1<SUP>$2</SUP>$3");
}
</SCRIPT>
</BODY>
</HTML>

--
Stephen Chalmers http://makeashorterlink.com/?H3E82245A


Sep 22 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

94
4640
by: Gabriel Zachmann | last post by:
Is it correct to say that strong/weak typing does not make a difference if one does not use any pointers (or adress-taking operator)? More concretely, I am thinking particularly of Python vs C++. So, are there any examples (without pointers, references, or adress-taking), which would have a different result in Python and in C++? I would...
1
1896
by: Csaba2000 | last post by:
I am going nuts on this. Am I just blind, or is there some bug either in my code or IE? Nutshell version: I have a content editable div that is supposed to show its entry in red if it is not what it started out with. This works, EXCEPT if the content is completely erased(!) character by character, starting from the right(!). In that case,...
1
1467
by: suzy | last post by:
hi, i have created a aspx page template by creating a template.cs file which inherits from the page class. In this file I override the OnInit event and create a template in the form of a header, left menu and a footer. there is also a body area where the main content of the page will go. i created these 4 areas by dynamically creating a...
1
9605
by: David Van D | last post by:
Hi there, A few weeks until I begin my journey towards a degree in Computer Science at Canterbury University in New Zealand, Anyway the course tutors are going to be teaching us JAVA wth bluej and I was wondering if anyone here would be able to give me some tips for young players such as myself, for learning the language. Is this the...
0
2278
by: Aws | last post by:
My crazy GridView !! I am using Visual Studio 2005, I have a problem with my GridView. I have one access .mdb table and when I update a record on the table EVERYTHING is perfect. I made a Web Setup Project and installed My Web Application on my Localhost and it works perfectly. When I install My Web Application on our “Production...
1
11500
by: dharshanav | last post by:
Hi All, Is there a way to make the Mozilla browser behave the same way as IE when using in the design mode? For IE: <div id="left_div" contenteditable="true" frameborder="no" style="overflow:auto; border: 1px #0000ff solid;" '> &nbsp; Inner Div content
1
2356
by: delraydog | last post by:
Does a contentEditable DIV have the notion of an internal document? I'm trying to convert code that uses an IFrame.contentWindow.document to use the "document" inside a contentEditable DIV but they don't seem to be similar beasts. Eventually I want to add stylesheets to the contentEditable DIV as well as event handling. I'm porting an IFrame...
2
1328
by: Jason | last post by:
I'm building a rich editor to replace a textarea, and am about to release it as "live." But there's one last thing I want to do with it. When using a textarea, if the visitor clicks on "back" then the information is (usually) still there. But with the contenteditable field, it's gone. I read on a web page a few days ago that there was an...
0
7664
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7583
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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
1
7638
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7948
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6250
agi2029
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
1
5484
isladogs
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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes...
1
2082
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 we have to send another system
1
1198
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
923
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.