0

我正在尝试创建一个小片段，除非将链接悬停在其上，否则可以屏蔽文本。像这样的东西：

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

页面加载时，页面显示如下：

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

本质上，项目符号将占用与其替换的文本一样多的空间。然后，当用户单击“查看信息”链接时，掩码将恢复为信息。

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

在一页上会有多个这样的实例。

有任何想法吗？我真的不知道从哪里开始..我正在考虑制作一堆密码字段，但认为它会变得混乱..

4

3 回答 3

1

我敢肯定，远非完美！

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;
    });
});
于 2011-04-22T21:41:22.933 回答
0

使用数据（）。在加载时，您可以将每个 $('.mask') 的内容放入数据中：

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

然后你可以将一个函数绑定到鼠标点击，用文本替换星星。

于 2011-04-22T21:34:14.520 回答
0

我知道这可能与使用 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"  />
于 2013-02-06T02:39:05.700 回答