#html #css #input #styling
#HTML #css #ввод #укладка
Вопрос:
Я разрабатываю приложение, в котором пользователи могут выбирать URL-адрес своего профиля, ala facebook.com/name . Все прошло нормально, за исключением того, что у меня возникли проблемы со стилем добавления статического набора текста внутри ввода, чтобы помочь передать сообщение о наличии вашего собственного URL.
Вот как я хочу, чтобы входные данные выглядели, когда пользователь посещает страницу:
И вот как я хочу, чтобы это выглядело, когда они добавляют свой собственный вклад:
Половина этой проблемы проста, я могу просто установить большой левый отступ для ввода, заставить его отображать эффекты наведения независимо от того, где находится мышь, и соответствующим образом разместить ввод. Но проблема заключается в том, чтобы поместить текст в строку ввода, не нарушая стиль вокруг него (и не позволяя пользователю выбирать статический текст, так что даже щелчок по статическому тексту «сфокусирует» поле ввода за ним).
Я бы действительно предпочел использовать чистый HTML / CSS, но мог бы использовать Javascript, если это необходимо.
Вот где я сейчас, цель состоит в том, чтобы «www.website.com » введите текст в поле ввода, не нарушая стиль текстовой области, чтобы следовать: http://jsfiddle.net/rUkS8/1 /
Спасибо и извините за такое длинное описание!
Комментарии:
1. Определите div-элемент , чтобы получить видимую границу . Сделайте базовый URL статическим в виде текста в span-элементе . Добавьте текстовый ввод справа и отключите все стили для поля ввода.
2. Не уверен, что это подходящий шаблон пользовательского интерфейса. Пользователи, естественно, ожидают, что все во входных данных доступно для редактирования. Аналогичные реализации, которые я видел, показывают «полную» строку рядом с вводом и динамически обновляют ее на основе введенного содержимого.
Ответ №1:
Почему бы не обойти проблему и просто не поместить этот статический текст вне входных данных?
www.website.com/<input type="text" name="url" />
Это хорошо ухудшается в старых / безмозглых браузерах, работает, когда javascript отключен, и делает очевидным, где находится отдельный вход.
Комментарии:
1. Это тоже была моя первая идея. Я рекомендовал использовать div с рамкой и ввод без какого-либо стиля, чтобы добиться желаемого стиля.
2. Я пробовал это, получил некоторые замечания от остальной команды UX, которым не понравилось, как это нарушило стиль / поток страницы
3. Затем просто перехватывайте события «изменения» (размытие, нажатие клавиши и т. Д.) И проверяйте каждый раз, присутствует ли требуемый текст. Если это не так, добавьте его обратно. Это еще ХУДШИЙ дизайн, но если внешний вид превосходит удобство использования, то вам придется подчиняться взглядам людей, ценой превращения жизни пользователей в ад.
4. Хорошо, я переключился на более стандартную настройку, поле ввода с обновлением строки при вводе, показывающим конечную строку. Надеюсь, это интуитивно понятно!
5. @MarcB вы можете указать предлагаемое решение в комментариях в качестве опции в своем ответе.
Ответ №2:
Если вы используете метку и for атрибут, он будет обрабатывать события нажатия за вас:
<div style="border:1px solid #000;">
<label for="textinput" style="cursor:text;">asdf</label>
<input type="text" id="textinput">
</div>
Если вы нажмете на ярлык, он переместит фокус на ввод. Добавление cursor:text; добавляет эффекта. Все, что вам нужно сделать, это поиграть в игры с размером и границами, и все готово.