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 EnglishWhat 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:
|
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:
|
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)
Always searching for latest Hindi fonts, Developing new fonts. For latest fonts join our mailing list and get trending fonts right in your inbox every month.
6 comments
Write commentssir how to change win 10 Microsoft Edge Font Style
Replyhow to write lakshmi in hindi
ReplyFor most of hindi fonts you can type simply "y{eh" without quotes for word "lakshmi".
ReplyFor other fonts refer this layout page.
laxmee
ReplyI think he is asking about Devanagari script.
ReplyI HAVE MADE A HTML WHICH WORKS GOOD BUT THERE IS ONLY ONE BUG. I AM SENDING IT TO YOU PLEASE MAKE IT CORRECT
ReplyIf you are asking question, be sure to check 'notify me' check box to get your answer notification. Promotion links are not allowed. ConversionConversion EmoticonEmoticon