Write specific text on the screen with a mouse movement

Question

I want when i move the mouse write specific text on the screen

example:"hello world"

i have code but he is not what I want

script --->


window.focus();
  const output = document.querySelector('output');
  let text = 'A';
  window.addEventListener('mousemove', ({
    x,
    y
  }) => {
    if (x > 100) text = 'W';
    if (x > 400) text = 'X';
    if (y > 100) text = 'B';
    if (y > 400) text = 'J';
    output.textContent += text;
  });

please help me!!

where should the text be displayed? right on the cursor location?, and it creates a new text on every pixel movement? — Ramon de Vries, Sep 03 '20 at 11:44
@RamondeVries yes. wherever you move the mouse, the text will appear — kokiwebaaa, Sep 03 '20 at 11:46

Kaddath · Accepted Answer · 2020-09-03T12:24:52.393

1

note that I changed for document.querySelector('#output'); because I used a div with id "output". If you are using and <output> tag (?), keep it as in your original code.

Here the letter will move with the page scroll, if you want to keep at the same place while scrolling, use position: static; instead.

  const output = document.querySelector('#output');
  let text = 'Hello World!';
  window.addEventListener('mousemove', ({
      x,
      y
    }) => {
      output.innerHTML += '<div style="position: absolute; left: ' + x + 'px; top: ' + y + 'px;">' + text + '</div>';
  });

<div id="output" style="width: 100%; height: 100%;"></div>

edited Sep 03 '20 at 12:24

answered Sep 03 '20 at 11:57

Kaddath

5,933
1
9
23

Just as a side note: I quite like your solution as it's based on the vague sample code but this approach creates a zillion new `
` elements.
– obscure Sep 03 '20 at 12:00
but i want only text. this is word – kokiwebaaa Sep 03 '20 at 12:00
@obscure yes I reckon that's something to play with rather than an optimal proper code, but apart from using things like ` – Kaddath Sep 03 '20 at 12:07
@kokiwebaaa what do you mean by "this is word"? – Kaddath Sep 03 '20 at 12:09
@Kaddath Nice idea nevertheless - ` – obscure Sep 03 '20 at 12:12
@Kaddath i want print only one string. example "hello world" yous example only are letters. w,x,b,j – kokiwebaaa Sep 03 '20 at 12:17
@kokiwebaaa I kept what was in your original code, if you want a fixed string, put it in `let text = 'A';` and remove all your `if` (edited the answer) – Kaddath Sep 03 '20 at 12:24

score 0 · Answer 2 · answered Sep 03 '20 at 11:58

i have modifyied this answer: https://stackoverflow.com/a/7790764/9496199 to have the text hello world displayed instead of a dot, hope this helps.

code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <style>
    body {
      height: 3000px;
    }
    .dot {
      width: fit-content;
      height: fit-content;
      background-color: invisible;
      position: absolute;
    }
  </style>
</head>
<body>
<script>
  (function() {
    "use strict";

    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
      var dot, eventDoc, doc, body, pageX, pageY;
      
      event = event || window.event; // IE-ism
      
      // If pageX/Y aren't available and clientX/Y
      // are, calculate pageX/Y - logic taken from jQuery
            // Calculate pageX/Y if missing and clientX/Y available
      if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
      }

      // Add a dot to follow the cursor
      dot = document.createElement('div');
      dot.className = "dot";
      dot.innerHTML = "hello world";
      dot.style.left = event.pageX + "px";
      dot.style.top = event.pageY + "px";
      document.body.appendChild(dot);
    }
  })();
</script>
</body>
</html>

Write specific text on the screen with a mouse movement

2 Answers2