Find caret position in textarea in pixels [duplicate]

by

This “raw code” works at least in IE.

Using the code you can put your <TEXTAREA> where ever you want in page, and the <DIV id="db"> will follow it. Even despite of the scrolling position of the page. You can fix the position of <DIV> by changing the literal numbers at d.style...6-statements.

<body>
<div id="db" style="position:absolute;left:-20px;top:-20px;border:1px solid red;">V</div>
<br><br><br>
<form id="props">
<textarea id="ta" style="width:200px;height:100px;" onkeyup="moveDiv();"></textarea>
</form>

<script>
<!--
var b=document.body;
var d=document.getElementById('db');
var a=document.getElementById('ta');

function moveDiv(){
    var sel=document.selection;
    var targ=sel.createRange();
    d.style.top=a.offsetTop+a.clientTop-d.clientHeight-6;
    d.style.left=targ.offsetLeft+b.scrollLeft-6;
    return;
}
// -->
</script>
</body>

Positioning of the <DIV> is not quite exact, but gets better when using fixed-width font in <TEXTAREA>.

More Related Contents:

  1. Retrieve the position (X,Y) of an HTML element
  2. Creating a textarea with auto-resize
  3. Rendering HTML inside textarea
  4. How to autosize a textarea using Prototype?
  5. How to get selected text from a textbox control with JavaScript
  6. How to impose maxlength on textArea in HTML using JavaScript
  7. How to add line breaks to an HTML textarea
  8. Chrome counts characters wrong in textarea with maxlength attribute
  9. How do you get the cursor position in a textarea?
  10. Use tab to indent in textarea
  11. textarea character limit
  12. How to get number of rows in using JavaScript?
  13. Limit number of lines in textarea and Display line count using jQuery
  14. How FileReader.readAsText in HTML5 File API works?
  15. Position fixed not working in mobile browser
  16. Getting selected text position
  17. Count textarea characters
  18. What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?
  19. Inserting text at cursor in a textarea, with Javascript
  20. How to use square cursor in a HTML input field?
  21. How to read line by line of a text area HTML tag
  22. Finding number of lines in an html textarea
  23. CSS Textarea that expands as you type text [duplicate]
  24. Get value from text area [duplicate]
  25. Set cursor to specific position on specific line in a textarea
  26. Dynamic page load can’t load Java with page
  27. Is it the last `script` element the currently running script?
  28. getElementByClass().setAttribute doesn’t work
  29. Javascript + HTML5 localstorage [closed]
  30. Rasterizing an in-document SVG to Canvas

Leave a Comment