javascript - 将鼠标悬停在 React 输入中的最后一个字符上时显示菜单

Question

我目前正在使用 React-Bootstrap 处理一个表单，该表单具有一个接收消息的正文。此消息应包括从下拉菜单中选择的一些标签。问题是，当用户输入 & 时，将显示此下拉菜单，然后用户从菜单中选择一个选项来替换 & 符号。除了显示菜单的部分外，我几乎处理了所有事情。如何始终在用户输入的最后一个字符处显示菜单，以及如何在悬停在该字符上时显示它。例如，

“嗨，亲爱的，今天我们要处理 &[悬停在 & 符号上时必须在此处显示菜单]”

老实说，我很困惑，我只需要弄清楚我应该如何开始。如果有任何帮助，我将不胜感激。提前致谢。

问候。

标签： javascripthtmlcssreactjs

Answer 1

这是我想出的东西。

为了实现这一点，我首先想到的是检测inputor内部的插入符号位置textarea。

我找到了这个库，它运行良好。 https://github.com/bubkoo/get-cursor-position

下一个任务是弄清楚如何在inputor中放置一个菜单textarea。为此，我简单地创建了一个父对象div并设置100% width and height了它的输入，然后我们可以使用该 div 内的任何 html 标签放置它position: absolute，它就像我们在input标签内添加东西一样工作。

菜单添加了top&left我使用了那个库。其余的代码是基本的，您可以简单地在下面查看它。

这是代码：

const menu = document.querySelector('.menu')

function showMenu(element) {
  let lastChar = element.value[element.value.length - 1],
    caret = getCaretCoordinates(element, element.selectionEnd);

  if (lastChar === "&") {
    menu.style.display = 'block';
    menu.style.left = caret.left + 20 + 'px'
    menu.style.top = caret.top + 20 + 'px'
  } else {
    menu.style.display = 'none'
  }
}

function copyText(text) {
  const input = document.querySelector('#input')
  input.value += " " + text
  menu.style.display = 'none'
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.3s ease;
}

body {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-content: center;
  background-color: blueviolet;
}

.parent {
  position: relative;
  width: 500px;
  height: 120px;
}

#input {
  background-color: white;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  padding: 20px;
}

#input:focus {
  border: 0;
  outline: none;
}

.menu {
  display: none;
  position: absolute;
  background-color: black;
  color: white;
  width: 100px;
}

.menu li {
  text-align: center;
  cursor: pointer;
  height: 60px;
  list-style: none;
  display: grid;
  place-content: center;
  padding: 10px;
}

li:hover {
  background: white;
  ;
  color: black;
  border: 1px solid black
}

<div class="parent">
  <textarea id="input" oninput="showMenu(this)"></textarea>
  <div class="menu">
    <li onclick='copyText(this.innerText)'>Mango</li>
    <li onclick='copyText(this.innerText)'>Banana</li>
    <li onclick='copyText(this.innerText)'>Apple</li>
    <li onclick='copyText(this.innerText)'>Orange</li>
    <li onclick='copyText(this.innerText)'>Grapes</li>
  </div>
</div>

<script src="https://rawgit.com/component/textarea-caret-position/master/index.js"></script>