时间戳

首页 > 解决方案 > 如何在文本Javascript中获取char的索引作为坐标

javascript - 如何在文本Javascript中获取char的索引作为坐标

问题描述

我想在坐标处获取文本中 char 的索引。我目前的方法是模拟选择。

document.getSelection().anchorOffset我能够使用以下代码模拟坐标单击，但是与实际单击不同，此模拟单击不会触发选择（设置）。

function click(x,y){
  var el = document.elementFromPoint(x,y);
  var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )
  el.dispatchEvent(event);
}

这是实验代码https://jsfiddle.net/fbwgm1s0/1/

function click(x,y){
  var el = document.elementFromPoint(x,y);
  var event = new MouseEvent( "click", { clientX: x, clientY: y, bubbles: true } )
  el.dispatchEvent(event);
}

function printCoordinatesAndSelectedIndex(event) {
  let coordinates = "clientX: " + event.clientX + " - clientY: " + event.clientY
  let selectedIndex = "index: " + (document.getSelection().anchorOffset -1)
  return coordinates + " " + selectedIndex
}

document.querySelector('h1').addEventListener('click', function(event){
  let result = document.createElement("div")
  result.innerText = printCoordinatesAndSelectedIndex(event)

  let results = document.querySelector('#results')
  results.appendChild(result)
})

document.addEventListener('keydown', function(event){
  document.getSelection().removeAllRanges()

  let h1 = document.querySelector("h1").getBoundingClientRect()
  var x = h1.x + 50
  var y = h1.y + 15
  click(x, y)
})
<h1>press any key or click me</h1>
<div id="results"></div>

标签： javascripttextselection

解决方案

<h1>您可以将标签内的每个字符包装在<span>. 这对用户来说是不可见的，但为您提供了另一个元素来监听点击。<span>然后您可以检查<h1>.

const h1 = document.querySelector('h1');

const wrapTextWithSpans = target => {
  const text = target.textContent;
  const separatedText = text.split('');
  const wrappedText = separatedText.map(item => `<span>${item}</span>`);
  target.innerHTML = wrappedText.join('');
}

h1.addEventListener('click', ({ target }) => {
  const index = Array.from(target.parentElement.children).indexOf(target);
  console.log(index);
});

wrapTextWithSpans(h1);
<h1>press any key or click me</h1>
<div id="results"></div>

推荐阅读