如何将项目放在输入字段中？

Question

我正在创建一个标记管理器，并希望在输入字段中显示我的标记。

我明白这是不可能的标准，我想通过CSS来模仿这个。不幸的是，我是前端开发的新手，只熟悉基本的css属性。

你能猜一下我该怎么办吗？

Answer 1

您可以通过向标准元素添加contenteditable属性来实现此目的，如下所示：

<div contenteditable="true">This is an editable div.</div>

然后你可以写这个元素并将其他元素放在里面。

Answer 2

我在下面的示例中使用带有span的输入标记，其中一些文本位于输入内部。所以你可以在输入中使用标签

span{
  position:relative;
  left:-35px;
  background:yellow;
  }



<input type="text">
  <span>tags</span>