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

OUTPUT

Text Box1:


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="https://hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="https://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:
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="https://hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="https://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="https://hinkhoj.com/common/js/keyboard.js"></script>
<link rel="stylesheet" type="text/css"
href="https://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 :

For support/help/suggestion contact at info@hinkhoj.com