wailiaOdora
New Member
I'm trying to make an on-screen keyboard for my friend so that certain devices don't have to "transition screens" to go the OS's keyboard. Honestly, I don't own any Apple product, let alone an Android or anything like that, so I'm going at this blindly.I have a (unfinished) basic on screen keyboard that writes text to a div element. Each character is within a span (maybe because putting each char in a span means that I can accomplish what I want to).My question is, for this box that I'm writing to, is there a way to make a "cursor" to tell your "index" of the string? Like, how you can jump to one sentence to another by clicking with a mouse on a different area of the textfield on computers.And then what about text selection and deletion? I certainly don't want users to keep hitting the "backspace" button just to get to the part that they want to start typing.Some help with this would be really appreciated. Thanks!(Oh, and can somebody PLEASE edit the code below, please? I have no idea why it's not displaying properly in this post.)Since I couldn't paste the code I had directly into this post for some reason, I made a jsFiddle for it located here:jsfiddle.net/cC6KT/css:<style> .keybutton-n{ width:14px; height:14px; border:1px solid #000; display:inline-block; margin-bottom:3.5px; margin-top:3.5px; text-align:center; font-size:0.5em; } .keybutton-l{ }</style>html: <div id="box"style="border:1px solid #000;width:220px;height:30px;letter-spacing:1.25px;word-wrap:break-word;"></div><div id="keyboard"style="width:230px;height:80px;border:1px solid #000;position:absolute;bottom:0px;left:0px;z-index:4;background:#CCC;"> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/1"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/2"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/3"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/4"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/5"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/6"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/7"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/8"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/9"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/0"onmouseup="typeText(this.value);"/> <br/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/q"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/w"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"valuhttp://stackoverflow.com/questions/14534837/e="e"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/r"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/t"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/y"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"valhttp://stackoverflow.com/questions/14534837/ue="u"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/i"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/o"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/p"onmouseup="typeText(this.value);"/> <br/> <input type="button"class="keybutton-n"vhttp://stackoverflow.com/questions/14534837/alue="a"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/s"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/d"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/f"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/g"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/h"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/j"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/k"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"vahttp://stackoverflow.com/questions/14534837/lue="l"onmouseup="typeText(this.value);"/> <input type="button"class="keybutton-n"value="http://stackoverflow.com/questions/14534837/;"onmouseup="typeText(this.value);"/></div>js: <script> function typeText(c){ var b=document.getElementById('box'); var id=Math.round(Math.random()*111)+Math.round(Math.random()*111)+Math.round(Math.random()*111)+Math.round(Math.random()*111)+Math.round(Math.random()*111); b.innerHTML+="<span id='kb_text_"+id+"'>"+c+"</span>"; } </script>