Question

我有一个input元素，它从数据库中呈现值，并使用Ajax调用实时编辑输入值。问题是当我将文本放入比输入元素宽度更长的时间，而不是在新行上显示文本时，文本保持在同一行。我试图创建一个动态输入元素，可以根据数据库中的值渲染来调整它的高度。

我目前的输出：

My current output of the input element

我的输入元素代码：

<input class="topic-dynamic" style="height:100%; margin-top:60px; font-size:3em; letter-spacing:-0.04; text-align:left; font-weight:600;" value="'.$topic.'" onkeypress="updateThedynamicContent()">

Answer 1

要打包长文本，您需要使用<textarea>而不是<input>。无法使用CSS根据文本内容调整任何HTML控件的大小，您需要在JavaScript中执行此操作。

或者，你可以使用<span>来完成以上所有操作（包装文本并自动调整其大小），但你需要通过添加contenteditable="true"属性使其可编辑。

＆＃13;

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

＆＃13;

<div>
  <span contenteditable="true">This text can be edited by the user</span>
</div>

＆＃13;

此方法的唯一问题是，如果您要将值作为表单的一部分提交，则您必须自己在JavaScript中执行此操作，因为只有HTML控件才被视为表单的一部分。这样做相对容易。例如，您可以添加隐藏字段，并在表单的onsubmit事件中将span的值分配给隐藏字段，然后该字段将随表单自动提交。

如何使我的输入元素高度动态？

1 个答案: