如何在html输入字段中的单个单词下方显示弹出/工具提示

Question

我想在html输入字段上进行一些拼写检查。为此，我想强调错误的单词，并在单词下面显示替代方案。

后台功能已经有效，现在我正在使用http://jquery-spellchecker.badsyntax.co/（由siddhartha提及）。 我理解并找到了如何在富文本字段上执行此操作但不在单行输入<input type="text" value="Here iz somme...">上的示例。 我的问题是我没有在正确的地方得到单词选择框。如果html输入是“Here iz somme”并且我点击'Iz'，我不能将弹出窗口放在该文本下面。

它应该是这样的（想象一下“这里iz somme badlyy speldt worddz”是html输入值）

Answer 1

您可以使用jquery插件..请在此处查看

http://jquery-spellchecker.badsyntax.co/

解决方法可以使您的文本区域看起来像输入文本，我的意思是它看起来像输入字段

HTML：

<textarea id="textarea-content" rows="1" style="width:90%" spellcheck="false">Here iz somme badlyy speldt worddz</textarea> 

CSS：

textarea
{
   resize: none;
   border:solid 1px #d2d2d2;
   background: #fff;
   color: #333;
   height: 44px;
}

Answer 2

请查看BJSpell - 这是javascript中的一个很好的实现，可以使用Hunspell词典。

Answer 3

没有javascript就很难做到这一点。所以我的建议是使用javascript。

如果我们有“Here iz somme badlyy speldt worddz”。当我们点击某个坏词然后我们用javascript捕获鼠标位置（我们可以使用jquery）然后在我们从鼠标位置获得的位置显示弹出基础。