J'essaye d'obtenir la coordonnée y du curseur dans un div contented en utilisant getBoundingClientRect(). La branche IE du code fonctionne, mais pas l'autre branche (c'est-à-dire Firefox 3.5 pour mes tests actuels).Problème getBoundingClientRect avec Firefox
Le code ci-dessous contient les lignes problématiques marquées d'un *** dans le commentaire. À ce stade du code, selObj et selRange ont toutes deux une valeur (confirmée dans Firebug), mais je ne peux pas appeler getBoundingClientRect() sur l'une d'entre elles (par exemple, selObj.getBoundingClientRect n'est pas une fonction). J'ai lu que getBoundingClientRect() est maintenant supporté sur Firefox sur l'objet Range, mais je n'arrive pas à le faire fonctionner. Je suppose que je dois l'appeler sur le mauvais type d'objet ...? Sur quoi devrais-je l'appeler?
Le code suivant est le cas de test complet en tant que fichier html contenant le javascript correspondant. Vu dans IE, j'obtiens une valeur pour la coordonnée y du curseur, mais dans Firefox il apparaît.
<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>
"Pops"? Pouvez-vous expliquer ce que cela signifie? Est-ce qu'il lance une exception? – Pointy
Oui, désolé, c'est ce que je voulais dire par 'pops' – Tom