1

When you create a new contenteditable <span> on a page where scale is used, the keyboard cursor is sometimes put at a wrong position with Firefox.

enter image description here

Example : click on the right side of the window in the following snippet example : the "Strawberry" text will appear, but the I keyboard cursor will be in a wrong position.

How to have a good I keyboard cursor position for contenteditable objects ?

    window.onload = function() {
      var container = document.createElement("div"),
        wrapper = document.createElement("div");
      container.style.position = "absolute";
      wrapper.style.position = "relative";
      container.appendChild(wrapper);
      document.body.appendChild(container);
      container.style.transform = "scale(0.6)";    
      zoom = 0.6;  

      window.onclick = function(e) {
        if (e.target.className == 'texte') { return; } 
        var tb = document.createElement('span');
        tb.className = "texte";
        tb.contentEditable = true;
        tb.style.fontSize = '40px';
        tb.style.position  = 'absolute';
        tb.textContent = 'strawberry';
        tb.style.top = e.clientY / zoom + 'px';
        tb.style.left = e.clientX / zoom + 'px';
        wrapper.appendChild(tb);
        tb.focus();
      }
    }
<!DOCTYPE html>
<html>
<head>
  <title>Text map</title>
</head>
<body>
</body>
</html>
Basj
  • 41,386
  • 99
  • 383
  • 673

1 Answers1

0

Running your code snippet the cursor for me seems to appear fine in the right position.....

jbr
  • 6,198
  • 3
  • 30
  • 42
James Brandon
  • 1,350
  • 3
  • 16
  • 43
  • this is not an answer, maybe a comment, but not an answer. Did you try with Firefox ? By the way you need to open the snippet "Full page" and click on the right of the page to see it happen. – Basj Sep 19 '14 at 10:20