Как разместить метку внутри ее текстового поля?

Question

У меня есть много текстовых полей, которые показывают текст инструкции внутри текстового поля (как будет выглядеть значение по умолчанию). В фокусе цвет текста становится светлее, но не исчезает, пока текст не введен. Когда текст удален, метка возвращается. Это довольно гладко. Значение по умолчанию не сокращает его, потому что они исчезают в фокусе.

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

Любая помощь будет принята с благодарностью. Но я не ищу значения по умолчанию в качестве решения.

Спасибо.

Mike

Отредактировано, чтобы быть более точным.

Снова отредактировал, чтобы предоставить некоторый простой код, который иллюстрирует эффект, который я получаю после:

<input style="position: relative; width: 150px; font-size: 10px; font-family: Verdana, sans-serif; " type="text" name="name" id="name"
onfocus="javascript: document.getElementById('nameLabel').style.color='#BEBEBE';"
onkeypress="javascript: if (event.keyCode!=9) {document.getElementById('nameLabel').innerHTML='&nbsp;';}"
onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your&#160;Name';"
onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your&#160;Name';}"/>
<label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;">Your Name</label>

Answer 1

Я бы выбрал другой подход (это не совсем моя идея, но я не могу найти источник кредита):

1-й - Используйте свойство html5 "placeholder".

2nd - используйте Modernizr.js для обнаружения поддержки заполнителей в браузере и простой скрипт jQuery для добавления поддержки браузерам, которые его не поддерживают.

Итак, HTML будет выглядеть примерно так:

<input type="text" class="placeholder" placeholder="Help Text" />
<textarea class="placeholder" placeholder="Another help text"></textarea>

css:

.placeholder{color:#ccc;}

И JavaScript:

/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'>
 * Depends on Modernizr v1.5
 */
if (!Modernizr.input.placeholder){
    $('input[placeholder], textarea[placeholder]')
        .focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        })
        .blur(function() {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }

        })
        //Run once on load
        .blur();

    // Clear all 'placeholders' on submit
    $('input[placeholder], textarea[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        });
    });
}

Answer 2

<script type="text/javascript">
    window.onload = function(){
        inputs = document.getElementsByTagName("input");
        for(i = 0; i < inputs.length;i++){
            var feild = inputs[i];
            if(feild.type == "text"){
                var label = document.getElementById(feild.id + "Label");
                label.style.left = "-" + feild.clientWidth;
            }
        }
    }
</script>

Этот бит скрипта должен делать то, что вы хотели

Answer 3

То, что вы спрашиваете здесь, это, вероятно, то, что называется водяным знаком для текстового поля.

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

Попробуйте это . Это довольно простая реализация этого с использованием jquery и css.

Answer 4

Вот тот, который я где-то позаимствовал:

$(function() {

    // Give the textbox a watermark
    swapValues = [];
    $('.your_input_class').each(function(i){
        $(this).val("Please enter xyz");
        swapValues[i] = $(this).val();
        $(this).focus(function(){
            if ($(this).val() == swapValues[i]) {
                $(this).val("").css("color", "#333");
            }
        }).blur(function(){
            if ($.trim($(this).val()) == "") {
                $(this).val(swapValues[i]).css("color", "#ccc");
            }
        });
    });

});

А затем для вашего поля ввода:

<input class="your_input_class" type="text" value="" />

Он запоминает значение, которое хранится в нем при загрузке страницы (ну, я устанавливаю мой прямо в JS), а также меняет цвет, когда фокусируется / не фокусируется.

Answer 5

Вы имеете в виду, как это ? Но вместо «требуется» он будет иметь метку?

Я использовал решение jQuery, в котором я установил значение для ввода 'required'. У ввода есть класс серого, поэтому текст по умолчанию светлее.

---

Редактировать после комментария

Вместо использования фокуса вы можете изменить входные значения при нажатии клавиш и при нажатии.

$('.required_input').keydown(function()
{
    if (this.value == 'required')
    {
        $(this).val('').removeClass('gray');
    }
} );

$('.required_input').keyup(function()
{
    if (this.value == '')
    {
        $(this).val('required').addClass('gray');
    }
} );

$('.required_input').blur(function()
{
    if (this.value == '')
    {
        $(this).val('required').addClass('gray');
    }
} );