Editable div Or Div as input box

 I have come across all  the hurdle to figure out the way of  doing the div  as  input  box. I finally  got the  solution to make  div as  editable. I have  used jQuery  to  tackle  editable div's acts as  input box.

The steps follow is:


  1. download the query  plugin from http://jquery.com
  2. Include it in your  html  page head  tag
           <script type="text/javascript" src="jquery.js"></script>  3. then add the  css
   
     .editableInputbox {
         -moz-appearance: textfield;
         -webkit-appearance: textfield;
         background-color: white;
         background-color: -moz-field;
         font: -moz-field;
         font: -webkit-small-control;
         margin-top: 5px;
         padding: 2px 3px;
         width: 300px;
     }
 4.write the div  tag button to  modify and put  in the inside the body  tag of your  html  document.

       <span class="editableInputbox" id="user_name" contenteditable="false">i have card</span>
       <div onclick="modifyContactAddress();">Modify</div>

5. write javascript  function to  make div as  editable text box.

  function modifyContactAddress()
 {
   document.getElementById('user_name').contentEditable = 'true';
   $('.editableInputbox').css({
       'border':'1px solid darkgray',
       'box-shadow':'1px 1px 1px 0 lightgray inset'
   });
}
i have  attached the  screenshot  of the editable div.

1.