Zmiana koloru pojedynczych liter w inpucie

pytanie zadane 16 sierpnia 2020 w HTML i CSS przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 16 sierpnia 2020 przez Marak123

Da się może w js wystylizować pojedyncze litery będące w inpucie np. mam ciąg znaków "przykładowy tekst" i chciał bym teraz zmienić kolor tylko literce "d" tak aby była czerwona i bym miał coś takiego "przykładowy tekst". W inpucie albo jakoś w value kolorować litery a nie cały tekst. Da się coś takiego zrobić w js albo najlepiej by było w css wie ktoś może jak to zrobić??

komentarz zamknięcia: dzięki za odpowiedź

1 odpowiedź

odpowiedź 16 sierpnia 2020 przez VBService Ekspert (253,100 p.)
edycja 17 sierpnia 2020 przez VBService

Najlepsza

Change color of one character in a text box HTML/CSS

You can't do this with a regular <input type="text"> or <textarea> element, but with a normal element (like <div> or <p>) made contenteditable, you have all the freedoms of html/css formatting.
<div contenteditable>
    ST<span style="color: red">A</span>CK OVERFLOW
</div>

Making content editable

[ Edit ]

change color of a word while typing
change color of the text in contenteditable div
imitate a password-type input while using a contenteditable div

To może być, coś jak pole do pisania kodu np.: javascript na stronie http://jsfiddle.net/

który w trakcie pisania kodu (czyli tekstu w div-ie) koloruje składnie (text).
Skrypt, który to wykonuje na jsfiddle to CodeMirror.

[ Edit ]

fake_input.html

<style>
  [contenteditable="true"] {
    outline: none;
    width: 300px;
    overflow: hidden;
    background-color: black;
    color: white;
    border: 2px solid gray;
  }
  [contentEditable="true"]:empty:not(:focus):before{
    content:attr(data-text);
    font-size: 12px;
    color: gray;
  }
  [id="key-code"] {
    width: 300px;
    overflow: auto;
  }
</style>
<body>
  <div id="fake-input" contenteditable="true" data-text="wpisz: przykładowy tekst"></div>
  <pre id="key-code"></pre>

<script>
  const fake_input = document.getElementById("fake-input");
  const key_code = document.getElementById("key-code");

  // fake_input.focus();

  fake_input.addEventListener("keydown", (event) => {
    if (event.isComposing || event.keyCode === 229) {
      return;
    }
  
    let fore_color = "";

    switch (event.keyCode) {
      case 68: // litera d
        fore_color = "red";
        break;
      case 84: // litera t
        fore_color = "blue";
        break;
      case 89: // litera y
        fore_color = "green";
        break;      
      default:
        fore_color = "white";
    }

    key_code.innerHTML += " " + event.keyCode
    document.execCommand('foreColor', false, fore_color);
  })
</script>
</body>

demo on-line [ document.execCommand ]