Как изменить цвет символов в строке?

Question

Тимофей

javascript

Как изменить цвет символов в строке?

Как можно скорректировать код, чтобы подсветка символов, выходящих за пределы ограничителя, работала корректно и без сдвига курсора в начало при вводе новых символов? Как правильно объединить строки, которые вы получаете в консоли? Или, возможно, есть более эффективный способ решить эту задачу с использованием textarea вместо contenteditable в вашем HTML коде?

12 апреля 2024 г. 16:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

1. Для изменения цвета символов в строке можно использовать CSS. Например:

```html
<style>
    .red-text {
        color: red;
    }
</style>

<div>
    <span class="red-text">Красный текст</span>
</div>
```

2. Чтобы подсветка символов, выходящих за пределы ограничителя, работала корректно и без сдвига курсора, можно использовать JavaScript. Например:

```javascript
const limit = 10; // устанавливаем ограничение на количество символов

const input = document.getElementById('input');

input.addEventListener('input', function() {
    if (input.value.length > limit) {
        input.value = input.value.substring(0, limit);
    }
});
```

3. Для объединения строк, полученных в консоли, можно использовать конкатенацию строк. Например:

```javascript
let str1 = 'Hello, ';
let str2 = 'world!';

let combinedString = str1 + str2;
console.log(combinedString);
```

4. Для более эффективного решения задачи с использованием textarea, можно использовать следующий пример:

```html
<textarea></textarea>
```

JavaScript:

```javascript
const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
    // ваш код обработки введенного текста здесь
});
```

Textarea позволяет легко вводить и редактировать текст, сохраняя его форматирование и удобство использования.

Answer 2

Я нашел следующее решение (спойлер - грязный хак с добавлением прозрачного div с двумя span): <br/> <pre><code class="html">&lt;input type="number" class="counter" /&gt;
  &lt;div class="symbols-wrapper"&gt;
    &lt;div class="symbols-hidden"&gt;&lt;/div&gt;
    &lt;div class="symbols" contenteditable="true"&gt;12345abc&lt;/div&gt;
  &lt;/div&gt;</code></pre> <br/> <pre><code class="css">.symbols-wrapper {
  position: relative;
  width: 220px;
  height: 120px;
}

.symbols {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.symbols-hidden {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: transparent;
}

.symbols, .symbols-hidden {
  border: none;
  padding: 2px;
  width: 220px;
  height: 120px;
}</code></pre> <br/> <pre><code class="javascript">const text = document.querySelector('.symbols')
const hiddenText = document.querySelector('.symbols-hidden')

text.addEventListener('input', () =&gt; {
  const counter = document.querySelector('.counter');

  // сохраняем текст разрешенной длины
  let validText = text.outerText.substring(0, Number(counter.value))

  // сохраняем остальной текст
  let invalidText = text.outerText.substring(Number(counter.value));

  // обнуляем красный span
  hiddenText.innerHTML = ""

  // добавляем белый span
  let span1 = document.createElement('span');
  span1.style.background = "";
  span1.innerHTML = validText;

  // если длина больше указанной в ограничителе, то добавляем красный span
  if (invalidText.length &gt; 0) {
    let span2 = document.createElement('span');
    span2.style.background = "rgba(252, 100, 59, 0.4)";
    span2.innerHTML = invalidText;
    hiddenText.innerHTML = span1.outerHTML + span2.outerHTML;
  } else {
    hiddenText.innerHTML = span1.outerHTML;
  }
  
})</code></pre>