Hi, In this post i am goig to explain about How to build virtual keyboard for your web application using google api. I got an request from users how to type hindi words in the web page. By using this code we can easily build the application your own language. ( Google support few languages ).
How to build virtual keyboard for your web application | Anil labs
Just Open the below link to create API Key
http://code.google.com/apis/loader/signup.html
How to build virtual keyboard for your web application | Anil Labs
You can provide your website link and generate API key and save it.
Javascript code:
<script src="https://www.google.com/jsapi?key={YOUR API KEY}" type="text/javascript"></script>
<script type="text/javascript">
/** How to setup a textarea that allows typing with a Hindi Virtual Keyboard. */
google.load("elements", "1", {packages: "keyboard"});
function onLoad() {
var content = document.getElementById('content');
// Create the HTML for out text area
content.innerHTML = '<textarea id="textCode" name="textCode" cols="100" rows="5"></textarea>';
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.HINDI],
['textCode']);
}
google.setOnLoadCallback(onLoad);
</script>
<script type="text/javascript">
/** How to setup a textarea that allows typing with a Hindi Virtual Keyboard. */
google.load("elements", "1", {packages: "keyboard"});
function onLoad() {
var content = document.getElementById('content');
// Create the HTML for out text area
content.innerHTML = '<textarea id="textCode" name="textCode" cols="100" rows="5"></textarea>';
var kbd = new google.elements.keyboard.Keyboard(
[google.elements.keyboard.LayoutCode.HINDI],
['textCode']);
}
google.setOnLoadCallback(onLoad);
</script>
HTML code:
Place below code in your
tag. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<h1>How to build virtual keyboard for your web application</h1>
<form method="post">
<div id="content">Loading...</div>
<input type="submit" value="Submit" />
</form>
<form method="post">
<div id="content">Loading...</div>
<input type="submit" value="Submit" />
</form>
PHP code:
You can insert into in your database.
<?php
if(isset($_POST['textCode'])){
echo "Inserted Code :".$_POST['textCode'];
}
?>
if(isset($_POST['textCode'])){
echo "Inserted Code :".$_POST['textCode'];
}
?>
By Adding below code in your PHP code and insert into database.
mysql_query("SET NAMES 'UTF8'");
Thanks
Anil Kumar Panigrahi
Thanks for this nice tutorial… very impressive…