求助个输入密码的效果

大家都知道，不管是用html标签还是input标签，输入password时，文本框显示为●
现在想做个效果如下：
１
●２
●●3
高手帮帮忙，3Q。

解决方案 »

  1.   


    <input name="pass_input" type="text" id="pass_input"/>
    <input name="pass_value" type="hidden" id="pass_value"/>
    <script>
        window.onload = function(){
            document.getElementById("pass_input").onkeyup = function(){
    var val = this.value;
                    document.getElementById("pass_value").value = document.getElementById("pass_value").value + val.substring(val.length-1);
    this.value = val.substring(0,val.length-1) + "*";
    alert(document.getElementById("pass_value").value);
    }

            //效果 是有了 但是 这样密码就不保密了啊，你取值时 也得取那个Hidden的值
        }
    </script>
      

  2.   

    <html><body><form>
    用户：
    <input type="text" name="user">
    <br />
    密码：
    <input type="password" name="password">
    </form>
    <p>
    请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。
    </p>
    </body>
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    </head>
    <body>
    <input type="text" id="pass_input" name="pass_input"/>
    <input type="hidden" id="pass_value" name="pass_value" />
    <a href="#" onclick="getValue()">sss</a>
    </body>
    <script type="text/javascript">
    window.onload=function(){
    document.getElementById("pass_input").onkeypress = function(e){
    var vv = document.getElementById("pass_value").value;
    var iv = document.getElementById("pass_input").value;
    if(e.keyCode == 0){
    //正常转入字符
    var c = String.fromCharCode(e.charCode);
    vv = vv + c;
    setTimeout(function(){
    var val = document.getElementById("pass_input").value;
    document.getElementById("pass_input").value = val.replace(/./g,'*');
    }, 1000);
    }else{
    if(e.keyCode == "8"){
    //回退
    vv = vv.substring(0,iv.length-1);
    }
    }
    document.getElementById("pass_value").value = vv;
    }
    }

    function getValue(){
    alert(document.getElementById("pass_value").value);
    }
    </script>
    </html>
      

  4.   

    你这密码要非得粘帖的话 那就自己再好好想想吧，可以试试在什么情况下能判断这个框内容改变了，然后根据要求变换 或者 你直接就不那么复杂 就用个input 框 往里输入，然后在这个框里按了键了，就在1 秒钟后把所有的内容换成*
      

  5.   

    <input name="pass_input" type="text" id="pass_input"/>
    <input name="pass_value" type="hidden" id="pass_value"/>
    <script>
    var len=0;
        window.onload = function(){
            document.getElementById("pass_input").onkeyup = function(){
            var val = this.value;
            var length=val.length;
            document.getElementById("pass_value").value = document.getElementById("pass_value").value + val.substring(len);
            //alert(document.getElementById("pass_value").value.length);
            this.value="";
            for(var i=0;i<length;i++){
             this.value += "*";
            }
            len= length;
            
            alert(document.getElementById("pass_value").value);
        }
        
            //效果 是有了 但是 这样密码就不保密了啊，你取值时 也得取那个Hidden的值
        }
    </script>
      

  6.   

    <input name="pass_input" type="text" id="pass_input"/>
    <input name="pass_value" type="hidden" id="pass_value"/>
    <script>
    var len=0;
        window.onload = function(){
            document.getElementById("pass_input").onbeforepaste= function(){
            var val = this.value;
            var length=val.length;
            document.getElementById("pass_value").value = document.getElementById("pass_value").value + val.substring(len);
            //alert(document.getElementById("pass_value").value.length);
            this.value="";
            for(var i=0;i<length;i++){
             this.value += "*";
            }
            len= length;
            
            alert(document.getElementById("pass_value").value);
        }
        
        }
    </script>
    还有防止粘贴onbeforepaste
      

  7.   

    可以找一下JQ的UI控件，功能较多，挑挑应该有这种功能的。
      

  8.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="http://www.google.com/jsapi" type="text/javascript"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        
        <script type="text/javascript">
            (function ($) {
                $.fn.dPassword = function (options) {                var defaults = {
                        interval: 200,
                        duration: 3000,
                        replacement: '%u25CF',
                        prefix: 'password_',
                        debug: false
                    }                var opts = $.extend(defaults, options);
                    var checker = new Array();
                    var timer = new Array();
                    $(this).each(function () {
                        if (opts.debug) console.log('init [' + $(this).attr('id') + ']');
                        // get original password tag values
                        var name = $(this).attr('name');
                        var id = $(this).attr('id');
                        var cssclass = $(this).attr('class');
                        var style = $(this).attr('style');
                        var size = $(this).attr('size');
                        var maxlength = $(this).attr('maxlength');
                        var disabled = $(this).attr('disabled');
                        var tabindex = $(this).attr('tabindex');
                        var accesskey = $(this).attr('accesskey');
                        var value = $(this).attr('value');                    // set timers
                        checker.push(id);
                        timer.push(id);                    // hide field
                        $(this).hide();                    // add debug span
                        if (opts.debug) {
                            $(this).after('<span id="debug_' + opts.prefix + name + '" style="color: #f00;"></span>');
                        }
                        // add new text field
                        $(this).after(' <input name="' + (opts.prefix + name) + '" ' +
                                     'id="' + (opts.prefix + id) + '" ' +
                                   'type="text" ' +
                                  'value="' + value + '" ' +
                   (cssclass != '' ? 'class="' + cssclass + '"' : '') +
                   (style != '' ? 'style="' + style + '"' : '') +
                     (size != '' ? 'size="' + size + '"' : '') +
           (maxlength != -1 ? 'maxlength="' + maxlength + '"' : '') +
             (disabled != '' ? 'disabled="' + disabled + '"' : '') +
             (tabindex != '' ? 'tabindex="' + tabindex + '"' : '') +
     (accesskey != undefined ? 'accesskey="' + accesskey + '"' : '') +
                          'autocomplete="off" />');                    // change label
                        $('label[for=' + id + ']').attr('for', opts.prefix + id);
                        // disable tabindex
                        $(this).attr('tabindex', '');
                        // disable accesskey
                        $(this).attr('accesskey', '');
                        // bind event
                        $('#' + opts.prefix + id).bind('focus', function (event) {
                            if (opts.debug) console.log('event: focus [' + getId($(this).attr('id')) + ']');
                            clearTimeout(checker[getId($(this).attr('id'))]);
                            checker[getId($(this).attr('id'))] = setTimeout("check('" + getId($(this).attr('id')) + "', '')", opts.interval);
                        });
                        $('#' + opts.prefix + id).bind('blur', function (event) {
                            if (opts.debug) console.log('event: blur [' + getId($(this).attr('id')) + ']');
                            clearTimeout(checker[getId($(this).attr('id'))]);
                        });                    setTimeout("check('" + id + "', '', true);", opts.interval);
                    });                getId = function (id) {
                        var pattern = opts.prefix + '(.*)';
                        var regex = new RegExp(pattern);
                        regex.exec(id);
                        id = RegExp.$1;                    return id;
                    }                setPassword = function (id, str) {
                        if (opts.debug) console.log('setPassword: [' + id + ']');                    var tmp = '';
                        for (i = 0; i < str.length; i++) {
                            if (str.charAt(i) == unescape(opts.replacement)) {
                                tmp = tmp + $('#' + id).val().charAt(i);
                            }
                            else {
                                tmp = tmp + str.charAt(i);
                            }
                        }
                        $('#' + id).val(tmp);
                    }                check = function (id, oldValue, initialCall) {
                        if (opts.debug) console.log('check: [' + id + ']');                    var bullets = $('#' + opts.prefix + id).val();                    if (oldValue != bullets) {
                            setPassword(id, bullets);
                            if (bullets.length > 1) {
                                var tmp = '';
                                for (i = 0; i < bullets.length - 1; i++) {
                                    tmp = tmp + unescape(opts.replacement);
                                }
                                tmp = tmp + bullets.charAt(bullets.length - 1);                            $('#' + opts.prefix + id).val(tmp);
                            }
                            else {
                            }
                            clearTimeout(timer[id]);
                            timer[id] = setTimeout("convertLastChar('" + id + "')", opts.duration);
                        }
                        if (opts.debug) {
                            $('#debug_' + opts.prefix + id).text($('#' + id).val());
                        }
                        if (!initialCall) {
                            checker[id] = setTimeout("check('" + id + "', '" + $('#' + opts.prefix + id).val() + "', false)", opts.interval);
                        }
                    }                convertLastChar = function (id) {
                        if ($('#' + opts.prefix + id).val() != '') {
                            var tmp = '';
                            for (i = 0; i < $('#' + opts.prefix + id).val().length; i++) {
                                tmp = tmp + unescape(opts.replacement);
                            }                        $('#' + opts.prefix + id).val(tmp);
                        }
                    }
                };
                
            })(jQuery);
            $(function () { //调用            $('#user-password-1').dPassword();
            });    </script>
    </head>
    <body>
         
    <div>
    <label for="user-password-1">Password</label>
    <input type="password" id="user-password-1" name="user-password-1" />
    </div>  </body>
    </html>