Input text mezőbe különböző színű betűk
2022-02-11T14:10:30+01:00
2022-02-16T21:08:11+01:00
2022-08-12T07:30:38+02:00
jimy76
Sziasztok!

Gondolom php-ban nem, de egyéb nyelven hogyan lehet megoldani, hogy az input text mezőbe kerülő value értéknek vagyis a betűknek 2 különböző színt használhassak?

<input type=text name=szoveg value='betűk'>

b,t = #000000
e,ű,k = #404040
Mutasd a teljes hozzászólást!
Szia!

Ha egy korábbi post request által küldött value értékét szeretnéd színesben megjeleníteni, akkor nem szükséges input mezőben gondolkodni. A szerveren php-val úgy generálhatnád le a html-t hogy a $_POST['tippek'] karaktereit egyedi <span> tagbe rakod. A <span> már kaphat egyedi stílus, így színezhető. A js kód is ezen az elven működik.

De ha szerkeszthetőnek is kell lennie a színes szövegnek, akkor próbáld ki a módosított scriptet. Átalakítottam, most lecseréli az input mezőt és a benne lévő taralommal létrehoz egy divet. Ezt a contenteditable tulajdonsággal szerkeszthetővé tettem. A billentyűzet leütésére a divben lévő szöveg minden karakterét <span> tagek közé rakja, amik közül néhány színezett. A betűket és a színeket a coloringCharacters függvényben lévő switch case szerkezetben tudod módosítani.

Sajnos a contenteditable-el szerkeszthetővé tett div nem olyan rugalmas beviteli mező, mint egy valódi input. A kurzor mozgását jobban nem tudom megoldani.

<style> .tippek { border: 1px solid darkgrey; padding: 3px; } </style> <input type = "text" id = "tippek" name = "tippek" class = "tippek" value = "<?= $_POST['tippek'] ?>" autofocus> <script> document.addEventListener('DOMContentLoaded', function () { const setCursor = (element) => { const range = document.createRange(); range.selectNodeContents(element); range.collapse(false); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } const coloringCharacters = (text = '') => { let div, span, iterator, theChar; div = document.createElement('div'); iterator = text[Symbol.iterator](); theChar = iterator.next(); while (!theChar.done) { span = document.createElement('span'); switch (theChar.value) { case 'b': case 't': span.style.color = 'red'; break; case 'e': case 'ű': case 'k': span.style.color = 'green'; break; default: span.style.color = 'black'; } span.innerText = theChar.value.toString(); div.append(span); theChar = iterator.next(); } return div; } const input = document.getElementById('tippek'); if (!input) throw new Error('Hiba! A tippek input mező nem elérhető.'); const divInput = document.createElement('div'); divInput.id = 'div-input' divInput.classList = input.classList divInput.setAttribute('contenteditable', 'true'); divInput.append(coloringCharacters(input.value)); divInput.addEventListener('keydown', (e) => { if (e.key.length === 1) { e.preventDefault(); const text = divInput.textContent || divInput.innerText || ''; const content = coloringCharacters(text + e.key); divInput.innerHTML = ''; divInput.appendChild(content); setCursor(divInput); } if (e.key === 'Enter') { e.preventDefault(); } }); input.parentElement.append(divInput); input.remove(); setCursor(divInput); }); </script>
Mutasd a teljes hozzászólást!

  • Mutasd a teljes hozzászólást!
  • Hali!

    … hogyan lehet megoldani, hogy az input text mezőbe kerülő value értéknek vagyis a betűknek 2 különböző színt használhassak?

    Szimpla input elemmel (úgy, ahogy' te szeretnéd) ezt nem oldható meg.

    Mutasd a teljes hozzászólást!
  • Alternatív megoldásnak nem jó, mert a betűk szélessége nem egyforma.
    Ezért köszi
    Mutasd a teljes hozzászólást!
  • Nem is gondoltam szimpla megoldásra! :)

    Ilyet találtam:
    How can I give different color for each letter in a text field?
    Mutasd a teljes hozzászólást!
  • Alternatív megoldásként próbáld ki ezt:

    <style> #div-input { border: 1px solid darkgrey; padding: 3px; } </style> <div id = "div-input" contenteditable = "true"></div> <script> const div = document.getElementById('div-input'); div.addEventListener('keydown', (e) => { if (e.key.length === 1) { e.preventDefault(); const span = document.createElement('span'); switch (e.key) { case 'b': case 't': span.style.color = 'red'; break; case 'e': case 'ű': case 'k': span.style.color = 'green'; break; default: span.style.color = 'black'; } span.innerText = e.key; div.append(span) const range = document.createRange(); range.selectNodeContents(div); range.collapse(false); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range) } }); </script>
    Ha ki szeretnéd olvasni az "input mező" tartalmát, akkor egy ilyesmi függvénnyel kell próbálkozni:

    function getValue() { const div = document.getElementById('div-input'); return div.innerText.replace(/(<([^>]+)>)/gi, ""); }
    A színeket a js függvényben szabadon társíthatod a betűkhöz. Biztosan van mit csiszolni rajta, de indulásnak talán jó lehet.
    Mutasd a teljes hozzászólást!
  • Kedves Pamacs!
    Köszönöm a komplett programot! Erre nem is számítottam! :)

    Részben félreérthető volt a kérésem, mert egész pontosan elég lenne a megjelenítés, a korábban létrejött value érték alapján. 

    Tehát a $_POST[tippek] be kerülő betűket színezné be.

    <div><input type=text autofocus=on name=tippek class='tippek' value=$_POST[tippek]></div>

    Tudsz abban segíteni, hogyan módosítsam a programod?
    Mutasd a teljes hozzászólást!
  • Szia!

    Ha egy korábbi post request által küldött value értékét szeretnéd színesben megjeleníteni, akkor nem szükséges input mezőben gondolkodni. A szerveren php-val úgy generálhatnád le a html-t hogy a $_POST['tippek'] karaktereit egyedi <span> tagbe rakod. A <span> már kaphat egyedi stílus, így színezhető. A js kód is ezen az elven működik.

    De ha szerkeszthetőnek is kell lennie a színes szövegnek, akkor próbáld ki a módosított scriptet. Átalakítottam, most lecseréli az input mezőt és a benne lévő taralommal létrehoz egy divet. Ezt a contenteditable tulajdonsággal szerkeszthetővé tettem. A billentyűzet leütésére a divben lévő szöveg minden karakterét <span> tagek közé rakja, amik közül néhány színezett. A betűket és a színeket a coloringCharacters függvényben lévő switch case szerkezetben tudod módosítani.

    Sajnos a contenteditable-el szerkeszthetővé tett div nem olyan rugalmas beviteli mező, mint egy valódi input. A kurzor mozgását jobban nem tudom megoldani.

    <style> .tippek { border: 1px solid darkgrey; padding: 3px; } </style> <input type = "text" id = "tippek" name = "tippek" class = "tippek" value = "<?= $_POST['tippek'] ?>" autofocus> <script> document.addEventListener('DOMContentLoaded', function () { const setCursor = (element) => { const range = document.createRange(); range.selectNodeContents(element); range.collapse(false); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); } const coloringCharacters = (text = '') => { let div, span, iterator, theChar; div = document.createElement('div'); iterator = text[Symbol.iterator](); theChar = iterator.next(); while (!theChar.done) { span = document.createElement('span'); switch (theChar.value) { case 'b': case 't': span.style.color = 'red'; break; case 'e': case 'ű': case 'k': span.style.color = 'green'; break; default: span.style.color = 'black'; } span.innerText = theChar.value.toString(); div.append(span); theChar = iterator.next(); } return div; } const input = document.getElementById('tippek'); if (!input) throw new Error('Hiba! A tippek input mező nem elérhető.'); const divInput = document.createElement('div'); divInput.id = 'div-input' divInput.classList = input.classList divInput.setAttribute('contenteditable', 'true'); divInput.append(coloringCharacters(input.value)); divInput.addEventListener('keydown', (e) => { if (e.key.length === 1) { e.preventDefault(); const text = divInput.textContent || divInput.innerText || ''; const content = coloringCharacters(text + e.key); divInput.innerHTML = ''; divInput.appendChild(content); setCursor(divInput); } if (e.key === 'Enter') { e.preventDefault(); } }); input.parentElement.append(divInput); input.remove(); setCursor(divInput); }); </script>
    Mutasd a teljes hozzászólást!
  • Köszönöm szépen!
    Mutasd a teljes hozzászólást!
abcd