Выделение текста ввод, стиль TripAdvisor

Автор оригинала: FreeCodeCamp Community Member.

Петр Газаров

Я недавно попросил дизайнера создать стиль ввода текста, как ввод поиска на TripAdvisor Отказ Мне это очень понравилось. Я собираюсь поделиться своим решением в качестве пошагового руководства, чтобы вы могли построить его самостоятельно.

Реализация включает в себя как CSS, так и JavaScript. Для нашей версии я собираюсь предположить, что у вас есть базовые знания о SCSS и реагируют.

Вот готовый кодепен:

Давайте построим это

Во-первых, мы создадим простой реагирующий компонент и визуализируйте его до DOM:

class App extends React.Component {
  render() {
    return (
      

        
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

Добавьте некоторые CSS к нему:

$input-font-size: 30px;
$input-line-height: 70px;
$font-family: Roboto Slab, sans-serif;

body {
  background-color: #222222;
}

.input-wrapper {
  width: 500px;
  margin: 50px auto;
}

input {
  height: 60px;
  width: 100%;
  min-width: 100%;
  padding: 0;
  border-radius: 0;
  line-height: $input-line-height;
  background-color: transparent;
  color: white;
  font-size: $input-font-size;
  border: none;
  outline: none;
  border-bottom: 3px solid #333333;
  font-family: $font-family;
}

Добавьте HTML-контейнер для реагирования для рендеринга:

Это получает нам основной ввод текста с нижней границей.

Теперь давайте добавим жизнь на границу!

Трудность с реализацией выделения состоит в том, что ширина должна быть уровнем с концом текста. Это также нужно работать с любым Семья шрифта и Размер шрифта Отказ

Так как входной элемент ширина Исправлено, нам нужен какой-то другой трюк для обнаружения того, где конец текста в любой момент времени.

Скажем, мы можем использовать второй элемент с динамический Ширина – в нашем примере это будет промежуток элемент с Ввод-выделение учебный класс. Далее мы скопируем текст ввода и поместите его внутри промежуток Отказ

Я включил вход от неконтролируемый для контроля , предоставив ценность пропры

Наш актектор React теперь выглядит так:

class App extends React.Component {
  render() {
    return (
      

        
        
          basic input, bottom border
        
      
    );
  }
}

Добавьте следующие правила CSS для входной сигнал

Примечание: Мы используем переменные SCSS здесь, чтобы убедиться, что шрифт Свойства одинаковы между вход и промежуток :

.input-highlight {
  font-size: $input-font-size;
  line-height: $input-line-height;
  font-family: $font-family;
  max-width: 100%;
}

Это получило нас здесь:

Далее давайте добавим верхнюю границу на промежуток И положите его, чтобы его границу накладывают нижнюю границу ввода. Также, так как Ввод-выделение теперь есть Должность: абсолютный родительский элемент понадобится Должность: относительный правило

.input-highlight {
  font-size: $input-font-size;
  line-height: $input-line-height;
  font-family: $font-family;
  max-width: 100%;
  
  border-top: 3px solid white;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
}

.input-wrapper {
  width: 500px;
  margin: 50px auto;
  position: relative;
}

Элемент охвата заканчивается текстом. Это делает его шириной идеальной мерой ширины текста на входе!

Теперь, простая часть: давайте использовать JavaScript для обновления текста в диапазоне каждый раз входное содержимое. Мы будем использовать React Государство Обновить значение как ввода и промежуток одновременно.

Вот наш обновленный компонент:

class App extends React.Component {
  constructor() {
    super();
    
    this.state = {
      inputValue: ''
    };
    
    this.onInputChange = this.onInputChange.bind(this);
  }
  
onInputChange(e) {
    const { value } = e.target;
    
    this.setState({
      inputValue: value
    });
  }
  
render() {
    const { inputValue } = this.state;
    
    return (
      

        
        
          { inputValue.replace(/ /g, "\u00a0") }
        
      
    );
  }
}

.replace (//g, "\ u00a0") Часть необходима для правильного взаимодействия с пробелами.

Затем скрыть диапазон, добавив следующие строки к Ввод-выделение Селектор CSS:

color: transparent;
user-select: none;
overflow: hidden;

Нам нужны Переполнение: скрыто На диапазоне, чтобы ограничить его ширину (в противном случае это приведет к тому, что контейнер растягивается горизонтально – спасибо Prasanna и andrea за то, что указывает на это в комментариях!)

Заканчивать его

Это уже хорошо работает очень хорошо. Последнее прикосновение добавляет другой Onfocus Цвет для выделения.

Для этого нам нужен способ стиля пролета на основе фокусировки состояния ввода. Вход и промежуток – это братья и сестры, поэтому мы будем использовать селектор сериала CSS ( + ).

Вот код для полного вход селектор, включая селектор брата для Ввод-выделение :

input {
  height: 60px;
  width: 100%;
  min-width: 100%;
  padding: 0;
  border-radius: 0;
  line-height: $input-line-height;
  background-color: transparent;
  color: white;
  font-size: $input-font-size;
  border: none;
  outline: none;
  border-bottom: 3px solid #333333;
  font-family: $font-family;
  
  &:focus {
    + .input-highlight {
      border-top: 3px solid #fbc91b;
    }
  }
}

Спасибо за прилипание! Если вам нравится этот пост, поделитесь этим с большим количеством людей, рекомендуем это.