Styling in einem HTML-Input-Tag

Question

sagen, dass ich den folgenden Text Eingabeelement haben:

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

Kann ich das "B" im Wert Bold machen? So sieht es aus wie B runo?

Ich weiß es ist ziemlich einfach innerhalb <span> und <div> Elemente:

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

Aber ist dies möglich mit einem <input> Element? Wenn ja, würde der Wert immer gleich bleiben, unabhängig davon, welches Styling darauf angewendet wurde?

Answer 1

Ein <input> oder <textarea> eigenes Element wird diese Art von Verhalten nicht unterstützen. Sie könnten einen Ansatz verwenden, die Ihre eigentliche Element verstecken würde und eine Fassade, um die Werte von Ihrem Element und geben sie als reines HTML in eine <div> kopieren angezeigt werden:

<!-- 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> 

Sie können see an example of this here und unten gezeigt:

eine bessere Alternative könnte einen Javascript-basierten HTML-Editor wie TinyMCE oder CKEditor zu bedienen.