How to build virtual keyboard for your web application

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

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

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>

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>

PHP code:

You can insert into in your database.

 <?php
  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

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online ... Contact : [email protected]

You may also like...

1 Response

  1. Shashi says:

    Thanks for this nice tutorial… very impressive…

Leave a Reply

Your email address will not be published. Required fields are marked *