I am trying to get the y coordinate of the cursor inside a contenteditable div using getBoundingClientRect (). Unfolding IE code works, but another branch (i.e. Firefox 3.5 for my current testing purposes) does not.
In the code below there are problematic lines marked with a *** in the comment. At this point in the code, both selObj and selRange have a value (confirmed in Firebug), but I cannot call getBoundingClientRect () for any of them (for example, selObj.getBoundingClientRect is not a function). I read that getBoundingClientRect () is now supported by Firefox in the Range object, but I cannot get it to work. I think I should call it the wrong type of object ...? What should I call?
The following code is a complete test case in the form of an html file containing the appropriate javascript. Viewed in IE, I get the value for the y coordinate of the cursor, but it appears in Firefox.
<html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #pageContainer { padding:50px; } .pageCommon { width: 100px; height: 100px; background-color:#ffffD0; padding: 10px; border: 1px solid black; overflow: auto; } </style> </head> <body> <div id="pageContainer"> <div id="editor" class="pageCommon" contenteditable onclick="setPageNav();" onkeypress="setPageNav();"> </div> <div>y: <span id="y"></span></div> </div> <script> var y; function setPageNav() { page = document.getElementById("editor"); if (window.getSelection) { var selObj = window.getSelection(); var selRange = selObj.getRangeAt(0); </script> </body> </html>
source share