在HTML输入标签内部样式化

Question

假设我有以下文本输入框：

<input type="text" value="Bruno">

我可以让值中的“B”加粗吗？这样看起来像Bruno？

我知道在和

元素中很简单：

<span><strong>B</strong>runo</span>

但是使用<input>元素能实现这一点吗？如果可以，那么无论应用了什么样的样式，该值是否仍然保持不变呢？

- user5563910

---

你可以将输入隐藏起来，然后在一个容器中显示文本，该容器看起来像你的输入，并使用span和div进行样式设置。 - dlane

不，你真的不能。 - user663031

你可以使用JavaScript库来管理输出到你的容器中。如果你想要的话，你可以使用纯JS、KnockoutJS或其他MVVM库。只需监听某些事件即可更新隐藏输入框中的真实值。 - dlane

你需要绑定每个输入事件并动态更改span。 - maioman

@Bruno 很抱歉，我完全忘了。我能想到的最接近的东西是这个：(https://jsfiddle.net/468cs9n8/1/)。基本上，输入值不支持 HTML 标记，只是纯文本 :( - NiCk Newman

Answer 1

<input>或<textarea>元素本身不支持此类型的行为。您可以使用一种方法来隐藏实际元素并使用外观将值从元素复制并将它们作为原始HTML输出到<div>中以显示：

<!-- An element to handle typing your content that calls a function -->
<input id='input' onkeyup='updateOutput(value);' />
<hr />
<!-- Your output element (to display your content) -->
<div id='output'></div>
<script>
  // A function to map your content and output it in your "output" element
  function updateOutput(html){
    document.getElementById('output').innerHTML = html;
  }
</script>

您可以在此处看到一个示例，并且如下所示：

更好的选择可能是使用基于Javascript的HTML编辑器，例如TinyMCE或CKEditor。

- Rion Williams

---

这非常有道理。我想我会根据我的需求来采用你的方法！我想我会在单击时切换<span>，将文本框显示在其位置，然后使用你的示例更新<span>，当输入失去焦点时，我会隐藏输入并显示<span>在原位。非常感谢你，Rion！ :) - user5563910