Hindi API: Create Hindi unicode text input box areas for website.

(Please go through the user agreement and terms and conditions section before using this API)

Introduction:

Since the adoption of Unicode, Hindi based websites are increasing on internet. Today it is very easy to create a Hindi website by using Unicode characters but the bigger challenge comes out to be taking hindi text inputs. The HinKhoj API solves this problem by providing javascript functions to display TextBox which helps users to type in both Hindi and English.

What is HinKhoj API:

Hinkhoj API consists of Javascript functions which display TextBox/TextArea that accepts Hindi/English. Users can use F12 to switch language between Hindi and English

What you need to do to use this :
 Include the following code in the header section of your HTML page:

 <script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
 <link rel="stylesheet" type="text/css"
 href="http://www.hinkhoj.com/common/css/keyboard.css" />

Showing Hindi TextBox using API:

Displaying simple TextBox:
Use the following function to display a TextBox which accepts Hindi input:

   function CreateHindiTextBox(elementId)
    {
//
    }
      
where elementId is ID to recognise textBox.

For Example the code below will display the following TextBox:


<html>
<head>
<script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="http://www.hinkhoj.com/common/css/keyboard.css" />
</head>
<body>
Text Box1:<br>
<script language="javascript">
   CreateHindiTextBox("id 1");
</script>
</html>

OUTPUT

Text Box1:

Let say you want to access the text from above text box. Use below code inside JavaScript Function. var textBox= document.getElementById("id1"); var hindiText=""; if(textBox!=NULL) { hindiText=textBox.value; }

Displaying custom TextBox:
In custom textbox, you can decide the default value in TextBox, length of TextBox and and will also get a Help Box for Hind-English mapping.
Use following function for it:
 
function CreateCustomHindiTextBox(elementId,defaultValue,size,showHelp)
{
//
}
where
   elementId means id of TextBox
   defaultValue means default value shown in Text Box
   size means length of TextBox
   showHelp is boolean. True means show help, False means doesn't show Help.

The example below will show how to use it:

<html>
<head>
<script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="http://www.hinkhoj.com/common/css/keyboard.css" />
</head>
<body>
Text Box1:<br>
<script language="javascript">
CreateCustomHindiTextBox("id 1","नमस्कार संसार",40,true);
</script>
</html>

OUTPUT

Text Box1:

न्नानेनैनिनीनोनौनुनूनंनँन्‍
NaNNannanAnenaininInonaununUnMn~Mn^

Displaying multiple TextBoxes in the same page:
You can use HinKhoj API to display multiple textbox in same page which accepts Hindi Input.

The example below will illustrate it:

<html>
<head>
<script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="http://www.hinkhoj.com/common/css/keyboard.css" />
</head>
<body>
Text Box1:<br>
<script language="javascript">
CreateCustomHindiTextBox("id 1","Text Box 1",49,true);
</script>
Text Box2:<br>
<script language="javascript">
CreateCustomHindiTextBox("id 2","Text Box2",70,false);
</script>
</html>

OUTPUT

Text Box1:

म्मामेमैमिमीमोमौमुमूमंमँम्‍म्‌
mmamAmemaimimImomaumumUmMm~Mm^m^^
Text Box2:


Displaying TextArea on website:
You can use the function below to display TextArea on a web page

    function CreateHindiTextArea(elementId)
    {
       //
    }
    where elementId is id of TextArea element. By default it have 2 rows and 50 columns.

 Example:

     <html>
    <head>
    <script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
    <link rel="stylesheet" type="text/css"
    href="http://www.hinkhoj.com/common/css/keyboard.css" />
    </head>
    <body>
    Text Box1:<br>
    <script language="javascript">
    CreateHindiTextArea("text area id 1");
    </script>
    </html>

OUTPUT

Text Area :


Displaying TextArea with Custom Settings:
Use the function below to display TextArea with custom settings:

     function CreateCustomHindiTextArea(elementId,defaultValue,columns,rows,showHelp)
    {
    //
    }
    Where defaultValue is default value shown in TextArea.
      columns is number of columns in textarea
     rows is number of rows in textarea/
    showHelp will display help if "true" is passed.Pass "false" if you don't want the help box.

Example:


    <html>
    <head>
    <script src="http://www.hinkhoj.com/common/js/keyboard.js"></script>
    <link rel="stylesheet" type="text/css"
    href="http://www.hinkhoj.com/common/css/keyboard.css" />
    </head>
    <body>
    Text Box1:<br>
    <script language="javascript">
    CreateCustomHindiTextArea("id 1","नमस्कार संसार",90,5,true);
    </script>
    </html>

OUTPUT

Text Area :

But in case of offline work this whole process is very simplyfied by a single IME (Input Method Tool) tool.
Get a free IME tool for your system.
Download IME software (size: 1.1MB)
Previous
Next Post »

6 comments

Write comments
6 November 2015 at 23:43 ×

sir how to change win 10 Microsoft Edge Font Style

Reply
avatar
Unknown
admin
31 December 2016 at 01:42 ×

how to write lakshmi in hindi

Reply
avatar
Arvind
admin
10 February 2017 at 23:41 ×

For most of hindi fonts you can type simply "y{eh" without quotes for word "lakshmi".
For other fonts refer this layout page.

Reply
avatar
Arvind
admin
14 June 2017 at 14:04 ×

I think he is asking about Devanagari script.

Reply
avatar
Unknown
admin
23 March 2018 at 10:48 ×

I HAVE MADE A HTML WHICH WORKS GOOD BUT THERE IS ONLY ONE BUG. I AM SENDING IT TO YOU PLEASE MAKE IT CORRECT

Reply
avatar

If you are asking question, be sure to check 'notify me' check box to get your answer notification. Promotion links are not allowed. ConversionConversion EmoticonEmoticon