Question

我正在尝试在用户坐标旁边放置一个输入字段。在此过程中，我遇到了两个问题：首先，我希望显示输入框：在用户单击键之前一直不显示输入框，因为单击键并将框的显示设置为绝对值后，它才起作用。没有出现。其次，我试图在没有事件的情况下获取用户坐标（我之所以有这样的判断，是因为我不想强迫用户进行（ousemoveve或任何其他鼠标事件）。

var inputCommand = document.querySelector('.command');
document.addEventListener('keypress', keyPressFunction);

function keyPressFunction(e) {
    inputCommand.style.display = "absolute"; // this does't work
    inputCommand.style.top = "100px"; // this should be replaced with the user's coordinates
    inputCommand.style.left = "500px"; // this should be replaced with the user's coordinates
}

<input type="text" class="command">

Answer 1

据我所知，没有鼠标事件就无法获得鼠标坐标。

解决方案：：使用mousemove事件将其位置存储到变量中。

另外，由于absolute是position而不是display的值，因此没有出现您的输入（如评论中所述）。

let mouseCoords = { x: 0, y: 0};

document.addEventListener('mousemove', e => {
  mouseCoords = { x: e.clientX, y: e.clientY };
});

const eInput = document.querySelector('input');

document.addEventListener('keypress', () => {
  eInput.style.top = `${mouseCoords.y}px`;
  eInput.style.left = `${mouseCoords.x}px`;
  
  eInput.style.display = 'block';
});

input {
  position: absolute;
  top: 0;
  left: 0;
  
  display: none;
}

<input type="text">

如何在JavaScript中将输入字段放在用户的鼠标坐标附近？

1 个答案: