Помещение не редактируемого статического текста в поле ввода [type = text] (снимки экрана) - PullRequest
Новая
       24

Помещение не редактируемого статического текста в поле ввода [type = text] (снимки экрана)

4 голосов
/ 23 октября 2011

Я разрабатываю приложение, в котором пользователи могут выбрать URL своего профиля, ala facebook.com/name. Все работало нормально, за исключением того, что у меня были проблемы со стилем, добавив статический набор текста во входные данные, чтобы помочь передать сообщение о наличии вашего собственного URL.

Вот как я хочу, чтобы входные данные выглядели, когда пользователь посещает страницу: enter image description here

И вот как я хочу, чтобы это выглядело, когда они добавляют свой собственный ввод: enter image description here

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

Я бы действительно предпочел использовать чистый HTML / CSS, но мог бы использовать Javascript, если это необходимо.

Вот где я сейчас нахожусь, цель состоит в том, чтобы поместить текст «www.website.com» в поле ввода, не нарушая стиль текстовой области, чтобы следовать: http://jsfiddle.net/rUkS8/1/

Спасибо и простите за такое длинное описание!

Ответы [ 2 ]

2 голосов
/ 23 октября 2011

Почему бы не обойти проблему и просто оставить этот статический текст вне ввода? 

www.website.com/<input type="text" name="url" />

Это заметно ухудшается в старых / устаревших браузерах, работает, когда отключен javascript, и делает очевидным, где находится отдельный вход.

0 голосов
/ 23 апреля 2013

Если вы используете метку и атрибут for, она будет обрабатывать события щелчка для вас: 

<div style="border:1px solid #000;">
    <label for="textinput" style="cursor:text;">asdf</label>
    <input type="text" id="textinput">
</div>

Если вы щелкните метку, она отправит фокус на вход.Ввод cursor:text; добавляет к эффекту.Все, что вам нужно сделать, это играть в игры с размером и рамкой, и все готово.

...