StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<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><!doctype html> <html> <head> <meta charset="utf-8"> <title>keyboard</title> <style> body>div{ clear:both; overflow:auto; border:2px solid grey; } body>div>div{ width:64px;line-height:64px;float:left; border:1px solid grey; text-align:center; } </style> <script> (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<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) </script> </head> <body> </body> </html> </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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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