Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Full example (missing some numbers etc..) can point whereveryou want.. and it stays there.</p> <p>Creates the keyboard dynamically,only one eventlistener</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;keyboard&lt;/title&gt; &lt;style&gt; body&gt;div{ clear:both; overflow:auto; border:2px solid grey; } body&gt;div&gt;div{ width:64px;line-height:64px;float:left; border:1px solid grey; text-align:center; } &lt;/style&gt; &lt;script&gt; (function(W){ var D,K,I,pos=0; function init(){ D=W.document; I=document.createElement('input'); document.body.appendChild(I); K=D.createElement('div'); K.id="k"; K.addEventListener('click',h,false); var L='a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z'.split(','), l=L.length; for(var a=0;a&lt;l;a++){ K.appendChild(document.createElement('div')).innerText=L[a]; } document.body.appendChild(K); } function h(e){ if(e.target.parentNode.id=='k'){ pos=(I.selectionStart?I.selectionStart:pos?pos:0); var end=I.selectionEnd?I.selectionEnd:pos; I.value=I.value.substr(0,pos)+ e.target.innerText+ I.value.substr(end); I.focus(); pos++ I.selectionStart=pos; I.selectionEnd=pos; } } W.addEventListener('load',init,false); })(window) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>ps.: I tested in Chrome.</p> <p>EDIT</p> <p>the only thing that doesnot work is if you select a text and write before deleting it it starts where te selection starts and leaves yor other selected letters where they are.</p> <p>EDIT 2 everything you expect works</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload