VPF::Как Input - text преобразовать в input - password

Rusman

Дата 25.10.2010, 08:50 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 312
Регистрация: 4.5.2006
Где: Пермь

Репутация: нет
Всего: нет

Здравствуйте!
Вообщем задача у меня следующая:
Есть поле для ввода пароля. В нем мне надо написать: "Введите пароль". А что при клике на него эта надпись исчезла а потом уже когда пользователь в него будет вводить текст то он уже будет заменяться звездачками.
Если сделать просто поле типа password то надпись сделать в нем "Введите пароль" не полчится.

Как можно реализовать такую задачу?

Спасибо!

CruorVult

Дата 25.10.2010, 09:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

сделать 2 поля:
одно текстовое для отображения подсказки.
2-е типа password для самого пароля.
и событиями onblur & onfocus менять видимость.

ksnk

Дата 25.10.2010, 10:07 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Плагинчик для jquery по поводу плейсхолдеров. Их дофига разных, но когда мне приспичило - написать свой оказалось энергетически выгоднее и эстетически приятственней smile

Выводит поверх инпута, или селекта, или текстареи span с нужным текстом. Для пущего единообразия - обрамляет инпут отдельным дивчиком. Разметка не должна ползти.
Немного странно смотрится на длинных полях с центрированным текстом ;)

Нужно доопределить класс .placeholder для пущей красоты.
Хром, вроде как, поддерживает нативно атрибут плейсхолдер для разных контролов, однако как управлять его внешним видом я понять не смог, по этому он убирается из контрола после разборок.

Код


/**
 * jQuery.placeholder - Placeholder plugin for input:text|passord, select fields
 *
 * @author Serge Koriakin
 * @version 1.0.0
 *  
 * @additional class definition:
 * .placeholder {
 *   color: silver;
 * }
 * @sample
 * <input type="text" name="name" placeholder="Enter Name"/>
 * @sample
 * <select name="name" placehlder="2">
 * <option value="0"></option>
 * <option>1</option>
 * <option>2</option>
 * <option>3</option>
 * <option>4</option>
 * </select>
 *
 **/
new function($) {
        
    var setting={
        attr:    "placeholder",
        className:    "placeholder",
        wrapcss:{
             padding:0
            ,margin:0
         ,display:'inline-block'    
         ,position:'relative'
        },    
        placeholdercss:{
             display:'block'
            ,position:'absolute'
            ,top:'0.2em'
            ,left:'0.5em'
        }
    };
    $.fn.wrapdiv=function(o){
        this.each(function(){
            if(!this.parentNode.style || this.parentNode.style.position!='relative'){
                var $this=$(this);    
                $this.wrap(
                 $('<div/>').css(setting.wrapcss).css({
                     marginRight:$this.css('marginRight'),
                     marginLeft:$this.css('marginLeft'),
                     marginTop:$this.css('marginTop'),
                     marginBottom:$this.css('marginBottom')
                 })
                )
                .css('margin','0');
            }
        });
        return this;
    }
    $.fn.placeholder = function(o) {
     if(!o) 
         o={}
     else if (typeof(o)=='string') 
         o={attr:o};
        $.extend(o,setting);
        this
        //.filter('select, texarea, input:file, input:text, input:password').filter('['+o.attr+'!=]')
        .each(function(){
            var text,def='';
            if(!(text=$(this).attr(o.attr)))
                if (!(text=o.text)) 
                    return;
            if($(this).is('.checkbox')) return;
            if(this.tagName.toLowerCase()=='select'){
                def='0';
                text=$(this).find('option[value='+text+']').html()||text;
            } 
            $(this).wrapdiv()
            .after(
             $('<span/>').addClass(o.className)
                 .html(text)
                 .css(o.placeholdercss)
                 .hide()
            )
            .removeAttr(o.attr)
            .bind('change blur',function(){
             $(this).parent().find('span')
                 [$.trim($(this).val())===def?'show':'hide']();
            })
            .parent().find('span').mousedown(function(){
             var self=$(this).hide().parent().find('input');
             setTimeout(function(){self.focus()});
            }).end().end()
            .focus(function(){
             $(this).parent().find('span').hide();
            })
            .trigger('blur');
        });
        return this;
    }
}(jQuery);

Добавлено через 1 минуту и 29 секунд
Ага. применять его примерно так

Код


$(function(){
  $('input').placeholder();
})

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »