Click here to Skip to main content
15,867,308 members
Articles / Web Development / XHTML

Fastest & Smallest Vietnamese JavaScript Input Editor

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
22 Sep 2010CPOL2 min read 57K   801   11   9
JavaScript VietUni version 1.7 Final

Introduction

Many Vietnamese web applications are using Vietnamese JavaScript typing for input. Some of them are VIM, VietJie, VietUni,...

Many years ago, I liked VietUni (V.1.618 - R.11.11.01 by Tran Anh Tuan), because it was very simple, fast and small.

But it doesn't run correctly in browsers now (Internet Explorer 7, FireFox, Opera, Netscape,...). So, I've tried to fix those problems and re-build VietUni to be more OOP. And now, I've completed a new version of VietUni (which you might call version 1.7 :).

  • I've tried to contact with VietUni's author, but failed. So, I rely on CodeProject to publish this version of VietUni.
  • This is an updated version of VietUni compatible with all-most favorite web-browsers now (Internet Explorer 6+, FireFox 1+, Safari, Opera, Chrome,...). The demo web-page is here.

Background

Almost all code and design is kept intact, except the main class and some Word-processing methods. All of VN-typing-processing algorithms are kept intact too.

Classes Diagram - Click to enlarge image

This version release has only one file: vietuni.js (~9KB). The main class is vietUni, and main methods of that class are initTyper(el) and setMethod(mode). You may initialize a new instance of that class, and call method initTyper(el) to process each Vietnamese inputs in your web page.

* Use jQuery is an easy way to initialize VietUni typer on VN-input elements as you want. See example here.

Using the Code

You may refer to the sample HTML file attached with this article to use this version of VietUni.

To use VietUni 1.7 for your web application, you must include vietuni.js file to your Web Page (ex: master page), and register VN-input method for each VN-input elements as follow:

JavaScript
// ...
<script type="text/javascript" src="vietuni.js"></script>
<script type="text/javascript">
var vUni = new vietUni();
// To enable VN-typing for textbox 'full_name' & textarea 'description'
vUni.initTyper(document.getElementById("full_name"));
vUni.initTyper(document.getElementById("description"));
// All of inputs else (ex: textbox 'email') are not registered VN-typing
</script>
// ...

When you want to switch VN-input method, you can call vUni.setMethod(int) (0=OFF, 1=TELEX, 2=VNI, 3=VIQR, 4=AUTO).

An example to register VietUni typer with jQuery using as below:

JavaScript
// ...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="vietuni.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var vUni = new vietUni();
  // Enable VN-typing for all input elements of CSS class name '.vuni'
  $(".vuni").each(function() { vUni.initTyper(this); });
});
</script>
// ...

The demo is here.

Points of Interest

I've referred to technical documents of favourite browsers now (Internet Explorer, FireFox, Konqueror, Safari, Opera, Netscape,...) to fix all bugs of VietUni 1.6.

And by making this more OOP, this version can be initialized in more than one instance of VN-typing methods in a web page.

After releasing this version of VietUni, I'll building a lightweight RichText-Editor with JavaScript to simplify for online-editing.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Junior)
Vietnam Vietnam
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralGood job! Pin
ngonhan2k523-Dec-10 22:54
ngonhan2k523-Dec-10 22:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.