JQuery Text Masking - PullRequest
Новая
       35

JQuery Text Masking

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

Я пытаюсь создать небольшой фрагмент, который позволял бы маскировать текст, если над ним не была наведена ссылка. Примерно так: 

<span class="mask">My Information</span>
<a href="#">View Info</a>

Когда страница загружается, страница отображается следующим образом: 

<span class="masked">••••••••••••••</span>
<a href="#">View Info</a>

По сути, пули занимают столько же места, сколько текст, который он заменяет. Затем, когда пользователь нажимает ссылку «Просмотр информации», маска возвращается к информации. 

<span class="mask">My Information</span>
<a href="#">View Info</a>

На одной странице будет несколько таких случаев.

Есть идеи? Я действительно не знаю, с чего начать .. Я думал о том, чтобы сделать кучу полей для паролей, но думал, что это будет грязно ..

Ответы [ 3 ]

1 голос
/ 23 апреля 2011

далеко от совершенства, я уверен!

jsfiddle 

(function($) {

    $.fn.toggleMask = function() {

        this.each(function() {
            if ($(this).hasClass('masked')) {
                $(this).text($(this).attr('origValue'));
                $(this).removeClass('masked');
                var link = $(this).next();
                link.text(link.text().replace(/Show/,'Hide'));
            }
            else {
                $(this).attr('origValue', $(this).text());
                $(this).text(new Array($(this).text().length).join('•'));
                $(this).addClass('masked');
                var link = $(this).next();                
                link.text(link.text().replace(/Hide/,'Show'));
            }
        });

    return this;
};
})(jQuery);

$(function() {
    $('.mask').toggleMask();
    $('a').click(function() {
        $(this).prev().toggleMask();
        return false;
    });
});
0 голосов
/ 06 февраля 2013

Я знаю, что это может не относиться к вопросу «но вот как показать и скрыть пароль» с помощью jquery 

  $(function(){
        $('#showPassword').change(function(){
        var passwordText = $('#password');
        if($(this).prop('checked') == true){
            passwordText.get(0).type = 'text';
        }else{
            passwordText.get(0).type = 'password';
        }
     });
 });

HTML 

    userName :<input type="text" id="strUserName" name="strUserName"/>
    password:<input type="password" id="password" name="password" />
    show Password<input type="checkbox"  id="showPassword"  />
0 голосов
/ 23 апреля 2011

Использовать данные (). При загрузке вы можете поместить содержимое каждого $ ('. Mask') в данные: 

$('.mask').each(function(){
    var t = $(this)
        ,text = t.text();
    t.data('text', text);
    //replace text with stars
});

И затем вы можете привязать функцию к щелчку мыши, которая заменяет звезды текстом.

...