getBoundingClientRect problem with Firefox

问题

I am trying to get the y coordinate of the cursor within a contenteditable div using getBoundingClientRect(). The IE branch of the code works, but the other branch (i.e. Firefox 3.5 for my current testing purposes) does not.

The code below has the problematic lines marked with *** in the comment. At that point in the code, both selObj and selRange have a value (confirmed in Firebug), but I cannot call getBoundingClientRect() on either of them (gives e.g. selObj.getBoundingClientRect is not a function). I have read that getBoundingClientRect() is now supported on Firefox on the Range object, but I can't get it to work. I guess I must be calling it on the wrong type of object...? What should I be calling it on ?

The following code is the full test case as an html file containing the relevant javascript. Viewed in IE, I get a value for the y coordinate of the cursor, but in Firefox it pops.

<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);
            // *** Neither of these next two lines work, error is : selObj.getBoundingClientRect is not a function
            y = selObj.getBoundingClientRect().top;
            y = selRange.getBoundingClientRect().top;
    } else if (document.selection) {
            var range = document.selection.createRange();
            y = range.getBoundingClientRect().top;
    }
    document.getElementById("y").innerHTML = y;
}

</script>
</body>
</html>

回答1:

I have read that getBoundingClientRect() is now supported on Firefox on the Range object

Not yet it isn't. That's a Mozilla 1.9.3 feature you can expect in Firefox 3.7.

You'll need fallback anyway, since it's not supported by any other browsers.

回答2:

I have read that getBoundingClientRect() is now supported on Firefox on the Range object

The support for that is new in Gecko 1.9.3 alpha, which will be included in the version of Firefox after 3.6.x. Firefox 3.5 does not support it.

来源：https://stackoverflow.com/questions/2245013/getboundingclientrect-problem-with-firefox

标签

javascript

firefox

contenteditable