JS / Html：没有下划线的{Editable-Textarea

Question

在我的html代码中，我有一个像这样的editable-textarea：

<span editable-textarea="category.name">{{category.name}}</span>

默认情况下，文本现在有一个虚线下划线。我不想要虚线下划线，但我不能把它拿走。我尝试了以下样式：

<span editable-textarea="category.name" style="text-decoration: none; text-underline: none">{{category.name}}</span>

但即使是文字装饰或文字下划线也会让它消失。其他一些解决方案？

P.S。 category.name保存在我的js数据中。我认为这在这里并不重要。可以是每一个文本。

Answer 1

您必须更改border-bottom

添加此样式：

border-bottom: none;

Here你有一个工作小提琴。

Answer 2

此代码可以帮助您 -

js code

document.getElementById("editable-span").spellcheck = false;

HTML

<span id="editable-span" editable-textarea="category.name">{{category.name}}</span>

出现虚线可能是由于拼写检查。

Answer 3

请尝试这种方式

<span editable-textarea="category.name" style="border:none;">{{category.name}}</span>