Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.11.2020, 17:29
Аспирант
Отправить личное сообщение для mazahaler Посмотреть профиль Найти все сообщения от mazahaler
 
Регистрация: 20.11.2017
Сообщений: 72

Разноцветный контент в input
Здравствуйте, стоит задача сделать input, в котором латинские буквы будут выделятся красным, а цифры - черным. Понимаю, что делать надо через contenteditable, где символы будут оборачиваться, например, в span с соответсвующим цветом(в зависимости от того, цифра или буква). Но с реализацией чет беда, хелп
Ответить с цитированием
  #2 (permalink)  
Старый 20.11.2020, 18:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Заменить просто - this.innerHTML = this.textContent.replace(/([a-z]+)/gi, '<span>$1</span>'), но нужно еще обрабатывать позицию курсора.
Ответить с цитированием
  #3 (permalink)  
Старый 20.11.2020, 22:13
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

contentEditable слишком большая боль для простых вещей, есть ещё техника, когда под прозрачный input просто подкладывается раскрашенный текст, примерно так:
<div class="input-container">
  <div class="input-shadow"></div>
  <input class="input"/>
</div>

<style>
.input-container{
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.input {
  width: 10em;
  margin: 0;
  color: rgba(0, 0, 0, 0);
  caret-color: #000;
  background-color: transparent;
  position: relative;
  white-space: pre;
}

.input-shadow {
  position: absolute !important;
  outline: none !important;
  border-color: transparent;
  top: 0;
  left: 0;
  color: #999;
}
</style>

<script>
function init(input, shadow) {
  const style = getComputedStyle(input);
  const exclude = /\b(fill|stroke|color)\b/;
  
  Array.from(style).forEach(
    property => !exclude.test(property) && (shadow.style[property] = style[property])
  )

  const colors = [
    '#f00',
    "#000"
  ];

  function wrapText(text, index) {
    if(!text) return;

    const color = colors[index % (colors.length + 1) - 1];
    if(!color) 
      return document.createTextNode(text);

    const span = document.createElement('span');
    span.append(text);
    span.style.color = color;
    return span;
  }

  function onscroll() {
    shadow.style.left = -input.scrollLeft + 'px';
  }
  
  function oninput() {
    shadow.innerHTML = '';
    input
      .value
      .split(/(\d+)|([a-z]+)/i)
      .map(wrapText)
      .forEach(node => node && shadow.append(node))
  }

  input.addEventListener('scroll', onscroll);
  input.addEventListener('input', oninput);

  oninput();
  onscroll();
}

init(document.querySelector('.input'), document.querySelector('.input-shadow'));
</script>
__________________
29375, 35

Последний раз редактировалось Aetae, 20.11.2020 в 22:22.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое копирование значения из input в input с одинаковыми атрибутами name ami_moor jQuery 2 10.08.2016 17:02
проверка input на контент RapCore Элементы интерфейса 3 05.08.2013 17:48
При добавлении DOCTYPE "плывут" размеры input type=text Demath (X)HTML/CSS 4 08.07.2012 19:27
Перемещение блока при скроллинге region029 Общие вопросы Javascript 10 16.06.2012 10:41
как зобрать контент из файла? input type="file". ntro123 AJAX и COMET 3 30.12.2010 23:01