473,699 Members | 2,184 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 1676

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
4711
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 appreciate all insights or pointers to literature. TIA,
1
1899
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, the color gets stuck on red. I've made a web page for this at http://csaba.org/demoDiv.htm The...
1
1477
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 placeholder in each area at runtime. in the template.cs i load user controls into each area...
1
9635
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 best Newsgroup for support with JAVA?
0
2287
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 Server” it just doesn’t update the records on Edit mode!!!
1
11503
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
2360
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 editor to a contentEditable DIV based editor. Thanks, Cliff.
2
1330
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 easy solution to this, but I didn't save the information and didn't save the page. Any ideas?
0
8697
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, well explore What is ONU, What Is Router, ONU & Routers main usage, and What is the difference between ONU and Router. Lets take a closer look ! Part I. Meaning of...
0
9184
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
8930
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 most users, this new feature is actually very convenient. If you want to control the update process,...
0
8892
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 choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6538
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 instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5878
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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4382
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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3062
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
3
2013
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 effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.