Please help: typing in contentEditable area

Dung Ping

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

Subscribe Post Reply

1667

Stephen Chalmers

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

Dung Ping

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

Similar topics

strong/weak typing and pointers

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++....

Python

Whacked out contentEditable/color weirdness

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...

Javascript

question about page template - please help

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...

ASP.NET

Starting University COSC and learning JAVA, advice please :D

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...

Java

Please Help this is my Crazy GridView !!

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...

.NET Framework

contenteditable="true" in Mozilla and IE (Mozila doesnt streach)

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"...

HTML / CSS

contentEditable DIV & document.body

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...

Javascript

Reloading ContentEditable area when visitor clicks on back button

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"...

Javascript

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General