是否可以创建输入的子元素？

Question

似乎不能将画布设置为输入元素的子元素。 DOM被正确操作但不显示画布。这甚至可能还是有解决方法？

Answer 1

这是不可能的。实际上，由于input是一个void元素，因此它不能包含任何子元素。您可以阅读有关void-elements here的更多信息。并不是说我确切地知道你正在寻找canvas的效果，但我相信你可以通过叠加元素在彼此之上并使用透明背景来实现它。

以下是如何将图像放入具有background属性的输入字段的示例。

input{
  width: 130px;
  height: 24px;
  border: 1px solid gray;
}
input:focus{
  outline: none;
}
input#password_input{
  padding-left: 36px;
  background: url('https://image.flaticon.com/icons/svg/149/149305.svg') no-repeat 0px 0px;
}

<input type="password" id="password_input"/>

Answer 2

这个画布的目的是什么？ 您不需要将其放入输入标记中以使画布具有交互性，如here