x
 
↑
Декабрь
•
4 •

4 •

7 •

6 •
↓
Павел Вакуненко
20 декабря 2012

Здравствуйте, уважаемые советчики. Подскажите пожалуйста, как реализовать самым простым способом скрипт, превращающий ссылку в текстовое поле?

Самое простое — обойтись вовсе без ссылки — добавлять видимую рамку и внутреннюю тень текстовому полю только по фокусу:

 
input {
  /* Убираем визуальные признаки инпута */
  border: 1px solid #fff;
  box-shadow: none;
  background: #fff;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}
input:focus {
  /* Рисуем ванночку инпута по фокусу */
  border: 1px solid #ddd;
  box-shadow: 0 1px 5px -1px rgba(0, 0, 0, .25) inset;
  cursor: auto;
}

Попробуйте изменить текст:

Это упрощённый код для демонстрации идеи. Как работают живые примеры в этом совете — смотрите в исходном коде.
⏎
⏎
⏎


Преимущества этого метода: не нужно писать сценарий, синхронизирующий текст ссылки и значение в поле; легко добиться, чтобы текст не прыгал при фокусе. Недостаток — невозможность подчеркнуть «ссылки» несплошной линией.

Если без подчёркиваний не обойтись, напишите скрипт, который по клику на ссылку передаёт фокус текстовому полю, через модифицирующие ЦСС-классы меняет видимость элементов, а по выходу из текстового поля обновляет текст ссылки:

1250 ⏎
1500 ⏎
1750 ⏎


Важная деталь: по эскейпу восстанавливается предыдущее значение.

P. S.
Это был совет о разработке веб-интерфейсов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии
Иван Титов
20 декабря 2012

Мой совет будет актуален для тех, кто создаёт ЦМС.

Если количество инпутов превышает определённый предел, то во избежание тормозов оптимальнее поступить следующим образом:
1. в таблице значений пометить классами те ячейки, которые можно изменять;
2. повесить на таблицу один обработчик клика, который проверит, куда кликнули (см. jquery target);
3. если кликнули по ячейке с нужным классом, то вместо текста в эту ячейку динамически вставляется инпут.

Альтернативный вариант — хранить инпут (или селект) в невидимом слое и показывать с нужными параметрами поверх кликнутого элемента.
Анатолий Лунёв
20 декабря 2012

В светлом будущем текст в инпутах можно будет подчеркнуть пунктиром с помощью text-decoration-style.

Как это будет можно посмотреть в Файрфоксе, добавив инпутам text-decoration: underline и -moz-text-decoration-style: dashed.
Олег Истомин
20 декабря 2012

Написал как-то такой плагин. Подойдет даже если текста будет на несколько строчек, можно сразу сохранять данные на сервере. Выложил на Гитхаб:

https://github.com/tamtakoe/autoGrowAndSaveArea
Александр Савенков
20 декабря 2012

Сижу на айпадике, жмакаю по ссылкам, и после нажатия на «Ввод» выделение переходит на следующую строку, хотя никакого редактирования не происходит.

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.
9 • Сайты для слабовидящих 2 • 4 • За какими вещами нужно следить, чтобы при загрузке страница выглядела прилично? 1 •




Недавно всплыло

Правдивость 3 • 1 • Как сделать, чтобы публикация выделялась в ленте: композиция, исправление дефектов, цвет 1 • Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 •