StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>an ugly solution: </p> <p>for ie: use document.selection...</p> <p>for ff: use a pre behind textarea, paste text before cursor into it, put a marker html element after it (cursorPos), and get the cursor position via that marker element</p> <p>Notes: | code is ugly, sorry for that | pre and textarea font must be the same | opacity is utilized for visualization | there is no autocomplete, just a cursor following div here (as you type inside textarea) (modify it based on your need)</p> <pre><code><html> <style> pre.studentCodeColor{ position:absolute; margin:0; padding:0; border:1px solid blue; z-index:2; } textarea.studentCode{ position:relative; margin:0; padding:0; border:1px solid silver; z-index:3; overflow:visible; opacity:0.5; filter:alpha(opacity=50); } </style> hello world<br/> how are you<br/> <pre class="studentCodeColor" id="preBehindMyTextarea"> </pre> <textarea id="myTextarea" class="studentCode" cols="100" rows="30" onkeyup="document.selection?ieTaKeyUp():taKeyUp();"> </textarea> <div style="width:100px;height:60px;position:absolute;border:1px solid red;background-color:yellow" id="autoCompleteSelector"> autocomplete contents </div> <script> var myTextarea = document.getElementById('myTextarea'); var preBehindMyTextarea = document.getElementById('preBehindMyTextarea'); var autoCompleteSelector = document.getElementById('autoCompleteSelector'); function ieTaKeyUp(){ var r = document.selection.createRange(); autoCompleteSelector.style.top = r.offsetTop; autoCompleteSelector.style.left = r.offsetLeft; } function taKeyUp(){ taSelectionStart = myTextarea.selectionStart; preBehindMyTextarea.innerHTML = myTextarea.value.substr(0,taSelectionStart)+'<span id="cursorPos">'; cp = document.getElementById('cursorPos'); leftTop = findPos(cp); autoCompleteSelector.style.top = leftTop[1]; autoCompleteSelector.style.left = leftTop[0]; } function findPos(obj) { var curleft = curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); } return [curleft,curtop]; } //myTextarea.selectionStart </script> </html> </code></pre>

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