javascript - <input type=text> 的 HTML 替代品，可以分配一个唯一的 ID 并与文本混合

Question

什么 html 元素能够被分配一个 ID 并且也是 <input> 的替代品元素？因为当前正在使用一个元素来根据用户输入更新该文本 block ；然而，从外观上看，<input>元素不起作用，因为它周围有大矩形 block 。

<div id="myModal">
...
<input type="text" id="txtUserName" size="150" disabled></input>
...
</div>

<script>
  ...
$('#txtUserName',$('#myModal')).val('Jim Smith');
  ...
</script>

除了文本周围的矩形 block 之外，该框的扩展范围似乎也有限制。

关于更新文本如何与其余文本无缝融合的想法或建议？因为最终目标是让用户能够通过电子邮件将模式中显示的内容(预填充文本和用户输入的组合)发送给另一个人。

Answer 1

您可以使用 contentEditable使任何元素都可编辑的属性。

Example Here

在这种情况下，只需使用 span，指定您的 id 并设置 contentEditable="true"。

在这样做时，该元素将与段落融为一体，并且最终用户仍然可以对其进行编辑。

<span contentEditable="true" id="txtUserName"></span>

由于该元素不再是 input，因此使用 .text() 方法而不是 .val()。

$('#txtUserName').text('Jim Smith');

..或使用纯 JS:

document.getElementById('txtUserName').textContent = 'Jim Smith';

---

关注元素时的结果:

..如果你不想要大纲:(example)

span[contentEditable="true"] {
    outline: none;
}

使用 contentEditable 属性的好处之一是文本将换行并继续表现为 span 元素。使用输入无法实现这一点。