Сделать * только часть * текстового поля недоступным для редактирования

Question

Я хочу, чтобы пользователь мог настроить свою личную страницу URL на моем сайте, где значение текстового поля будет «example.com/username», но я хочу, чтобы «example.com/» было в текстовом поле, но недоступно для редактирования

Tumblr делает это, но я не могу понять, как: http://www.tumblr.com/register

Answer 1

Это код, указанный на странице Tumblr.

     <input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
    id="tumblelog_name" name="tumblelog[name]"
                                            onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
{ $('tumblelog_name_background').style.color = '#c1cfdd' }"/>.tumblr.com

Как видите, дополнительный .tumblr.com вообще не является частью текстового поля ввода. Это div, стилизованный под поле ввода текста рядом с ним. Следовательно, создавая иллюзию неписываемого поля ввода текста.

Answer 2

На самом деле есть способ JavaScript сделать это без грязного CSS-хака.См. Сценарий на этой странице: http://aspdotnet -suresh.blogspot.com / 2010/11 / введение-здесь-я-объясню-как-to.html

Answer 3

нет способа сделать это.если вы посмотрите источник tumblr.com, то увидите, что «.tumblr.com» находится за пределами тега ввода.это просто простой стиль.Правая граница поля ввода = ничего.И добавьте одноуровневый узел, чтобы продолжить стилизацию.

 <input type="text" class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;"
                        id="tumblelog_name" name="tumblelog[name]"
                                                    onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') 
`enter code here`{ $('tumblelog_name_background').style.color = '#c1cfdd' }"
/>.tumblr.com 

Answer 4

Вы делаете это, проверяя значение вашего текстового поля onkeyup. В вашем обработчике событий вы можете убедиться, что текстовое поле говорит все, что вы хотите после того, как пользователь нажмет клавишу Если они удаляют твой текст, ты просто возвращаешь его туда после. Вы также хотели бы убедиться, что ваш обработчик также вызван onblur.

Answer 5

вы можете решить все с помощью css, это вход в сторону div, который содержит часть, которая не изменяется с тем же внешним видом.

HTML в вашем примере:

<div style="position:absolute; right: 8px; top: 4px; white-space: nowrap;">
     <input type="text" 
            class="text_field" style="padding:0px; border-width:0px; text-align:right; width:325px; background:transparent;" 
            id="tumblelog_name" 
            name="tumblelog[name]"     
            onfocus="$('tumblelog_name_background').style.backgroundColor = '#f9f8e4'; $('tumblelog_name_background').style.color = ''" 
            onblur="$('tumblelog_name_background').style.backgroundColor = ''; if($('tumblelog_name').value == '') { $('tumblelog_name_background').style.color = '#c1cfdd' }">.tumblr.com
</div>