Styling letters of a word within an input differently, possible?

前端 未结 4 1268
独厮守ぢ
独厮守ぢ 2021-02-06 04:08

Wondering if this is even possible, but if I have a input containing text, for example lets say the word \'Test\' is in the input. What I would like to be able to do is change

相关标签:
4条回答
  • 2021-02-06 04:28

    You should take a look at how HTML WYSIWYG editors are build.

    Basically, they

    • hide the input field and display another html element with the styled content: Highlight text as you type on textarea

    or

    • use design mode in html: javascript Rich Text Editors

    both ways are not trivial...

    0 讨论(0)
  • 2021-02-06 04:32

    No it's not possible with an <input type="text"> tag. You can however trick the user into believing he is using a styled input by replacing it with a contendeditable div or something.

    However, I looked into this couple of years ago, and it's a mess if you want a reliable cross browser solution for this. Unless I remembered wrong the html from just showing a bold text in a contenteditable div could easily result in the following across the major browsers:

    <BOLD style="font-weight:bold">Bold</BOLD> <!-- IE -->
    <span style="font-weight:bold">Bold</span> <!-- Chrome -->
    <b>Bold</b> <!-- Firefox -->
    <strong>Bold</strong> <!-- Safari -->
    <lol style="fOnt-WEIGHT: bold;">Bold</lol> <!-- IE6 -->
    

    No kiddin.

    0 讨论(0)
  • 2021-02-06 04:38

    If you take a look at the MDN CSS Reference you can see for yourself that there is no selector for single letters inside a field.

    The best you can do is use :first-letter

    But As you can see it does not work on <input />

    0 讨论(0)
  • 2021-02-06 04:41

    Don't think it is possible (will do some more test).

    What about adding a contenteditable div which looks like a input?

    Simple contenteditable exmaple: http://jsfiddle.net/PpEx7/

    EDIT

    Nopez not possible. :)

    0 讨论(0)
提交回复
热议问题