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

Please help: typing in contentEditable area

P: n/a
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
Share this Question
Share on Google+
2 Replies


P: n/a

Dung Ping <du*******@yahoo.com> wrote in message news:11**********************@g44g2000cwa.googlegr oups.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%;height:200px;backgrou nd-color:blue; color:#ffffff">
</div>
<SCRIPT type='text/javascript'>

var divRef="", textRef=document.forms.user.userText;

if(document.getElementById
&& (divRef=document.getElementById('chinkText'))!=nul l
&& document.body && document.body.innerHTML
)
{
textRef.onkeyup=addTone;
textRef.value="";
}

function addTone()
{
divRef.innerHTML=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

P: n/a
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*******@yahoo.com> wrote in message news:11**********************@g44g2000cwa.googlegr oups.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%;height:200px;backgrou nd-color:blue; color:#ffffff">
</div>
<SCRIPT type='text/javascript'>

var divRef="", textRef=document.forms.user.userText;

if(document.getElementById
&& (divRef=document.getElementById('chinkText'))!=nul l
&& document.body && document.body.innerHTML
)
{
textRef.onkeyup=addTone;
textRef.value="";
}

function addTone()
{
divRef.innerHTML=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 discussion thread is closed

Replies have been disabled for this discussion.