HTML输入<input type = text>,可以为其分配唯一ID并与文本混合

Question

什么html元素能够被赋予ID并且也是该<input>元素的替代元素？因为当前正在使用一个元素来根据用户输入更新该文本块; 然而,在外观方面,<input>元素不起作用,因为它周围有大的矩形块.

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

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

除了文本周围的矩形块之外,对于盒子扩展的距离似乎也存在限制.

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

Answer 1

您可以使用该contentEditable属性使任何元素可编辑.

这里的例子

在这种情况下,只需使用a span,指定你的id和设置contentEditable="true".

在这样做时,元素将与段落融合,并且最终用户仍然可以编辑它.

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

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

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

..或简单的JS:

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

关注元素时的结果:

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

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

使用该contentEditable属性的一个好处是文本将包装并继续表现为span元素.使用输入无法实现.