<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 </head>
<body>
<h1>test</h1>
<div style="background:white;height:500px">
 <svg id="my" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="40">
   <rect x="0" y="0" width="200" height="40" fill="grey"/>
   <rect x="10" y="10" width="180" height="20" fill="black"/>
   <text id="mytext" x="15" y="25" fill="white" font-size="18">QjkA</text>
   <rect id="cursor1" display="none" x="0" y="10" width="3" height="20" fill="white"/>
   <script><![CDATA[
   document.getElementById("my").addEventListener("click",registertextbox_1,false)
   function registertextbox_1(evt){
   evt.preventDefault()
   evt.stopPropagation()
   document.getElementById("cursor1").setAttributeNS(null,"x",16 + document.getElementById("mytext").getComputedTextLength())
   document.getElementById("cursor1").setAttributeNS(null,"display","inline")
   document.documentElement.addEventListener("click",unregistertextbox_1,false)
   document.documentElement.addEventListener("keypress",getKeys4_1,true)
   }
   function unregistertextbox_1(evt){
   evt.preventDefault()
   evt.stopPropagation()
   document.getElementById("cursor1").setAttributeNS(null,"display","none")
   document.documentElement.removeEventListener("click",unregistertextbox_1,false)
   document.documentElement.removeEventListener("keypress",getKeys4_1,true)
   }
   function getKeys4_1(evt){
   evt.preventDefault()
   evt.stopPropagation()
   var key=evt.keyCode
   if(key==0){key=evt.charCode}
   var ch=String.fromCharCode(key)
   //alert(key)
   switch(key){
   case 8:
   var input=document.getElementById("mytext").firstChild.nodeValue
   input=input.substring(0,input.length-1)
    document.getElementById("mytext").firstChild.nodeValue=input
   break;
   case 16:

break;
case 17:

break;
case 18:

break;
   
   default:
   document.getElementById("mytext").firstChild.nodeValue+=ch
   break;
   }
   
   
   
   document.getElementById("cursor1").setAttributeNS(null,"x",16 + document.getElementById("mytext").getComputedTextLength())
   }
   ]]></script>
 </svg>
 </div>
</body>
 </html>
