在HTML输入标记内

Question

说我有以下文本输入元素：

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

我可以在Bold中创建“B”吗？所以它看起来像 B runo？

我知道在<span>和<div>元素中非常简单：

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

但这可能是<input>元素吗？如果是这样，无论应用哪种样式，该值是否仍然保持不变？

Answer 1

它上面的<input>或<textarea>元素不支持此类行为。您可以使用隐藏实际元素的方法，并使用Facade复制元素中的值，并将它们作为原始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>

你可以see an example of this here并在下面演示：

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