Javascript HTML替代<；输入类型=文本>；可以指定唯一ID并与文本混合的

哪个html元素能够被分配一个ID，并且也是

元素的替代品？因为当前正在使用一个元素，以便根据用户输入更新该文本块；但是，就外观而言，

元素不起作用，因为它周围有一个大的矩形块

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

...
...

...
$（'txtUserName'，$（'myModal'））.val（'Jim Smith'）；
...

除了文本周围的矩形块外，框的扩展距离似乎也有限制

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

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

在这种情况下，只需使用

span

，指定

id

并设置

contentEditable=“true”

这样，元素将与段落混合，最终用户仍可对其进行编辑

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

..或使用普通JS：

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

---

聚焦元素时的结果：

…如果你不想要大纲：

使用

contentEditable

属性的好处之一是，文本将换行并继续作为

span

元素。使用输入无法实现这一点

---

如果您希望这些值可编辑，最简单的方法是继续使用您已经在做的输入。为了使这些输入和其他内容更好地融合，您可以通过CSS轻松更改它们的样式。只需为输入指定一个类，然后在样式表中为其指定一些样式

---

相反，如果这些元素仅通过脚本更改，而不是由用户直接编辑（用户通过其他方式编辑这些值），则可以将其替换为跨距（例如

），并将其内容设置为

$（'#userName'）。text（'Jim Smith'）

我的建议没有@Josh Crozier的答案那么好，但是如果要保留

元素，可以使用一点jQuery来计算字符数，然后随着文本的增长更新输入元素的宽度

HTML

Lorem ipsum dolor sit amet，是一位杰出的献身者。佩伦茨克
埃吉特·法雷特拉·厄罗斯。Suspendisse consequat magna id sapien ullamcorper，
欧盟政要拉科斯·维韦拉。尤伊斯莫德·卢克图斯·洛雷姆和索达莱斯万岁
最大同侧坐位。梅塞纳斯nec
尼西大比布斯酒店。Sed调味品苏打水nibh，nec consequat velit。

CSS

输入{
背景色：#eaeaea；
边界：无；
文本对齐：居中；
宽度：105px；/*以每个7px的15个字符为基础*/
}

jQuery

$（'.user input'）。每个（函数（索引）{
$（此）.on（'keydown'，函数（e）{
var$input=$（此）；
var len=$input.val（）.length；
如果（len>15）{//15*7px=105px=输入宽度
var width=len*7；//每个字符7px？
$input.css（'width'，width）；
}         
});
});

---

jsiddle:

类似于

contentEditable

属性。今天学到了新东西@乔什·克罗泽：这很有效。感谢您的精彩解释和分享此信息。1+。。但是我建议使用一种字体，比如

monospace

，这样所有字符的宽度都相同。目前，如果你输入一堆w，输入量将不够大。同样，如果你输入一堆i，就会有额外的空格。你可能想考虑相关的单位，如<代码> EM >代码> S。根据字体使用情况，此解决方案可能会有点“敏感”。Tweeking是必需的。感谢@hungerstar--我最初的想法是以某种方式计算字符数，然后更新输入字段的宽度，所以非常感谢您解释这将如何实现感谢@StefanoDalpiaz的反馈--我仍然需要掌握CSS，以利用您的建议，但您的将输入分配给类的其他建议是有意义的。再次感谢

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

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

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