用于模拟iPhone密码的jQuery在Visual Studio Web应用程序中将文本框更改为禁用

Question

我正在使用Visual Basic和母版页在Visual Studio中处理Web应用程序。我在子页面上有10个文本框字段，我想在其中模拟iPhone密码输入（即，显示输入的字符很短的时间，然后将该字符更改为项目符号）。这是文本框控件之一的定义：

<asp:TextBox ID="txtMID01" runat="server" Width="200" MaxLength="9"></asp:TextBox>

在定义上述控件的页面底部，我有以下内容：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/jQuery.dPassword.js"></script>
<script type="text/javascript">
        $(function () {
            var textbox01 = $("[id$=txtMID01]");
            alert(textbox01.attr("id"));
            $("[id$=txtMID01]").dPassword()
        });
</script>

当页面加载时，警报显示MainContent_txtMID01，它是控件的ID，前面是内容占位符的名称。

以下是lib / jQuery.dPassword.js（我在网上找到的内容：]

(function ($) {
$.fn.dPassword = function (options) {

    var defaults = {
        interval: 200,
        duration: 3000,
        replacement: '%u25CF',
    //    prefix: 'password_',
        prefix: 'MainContent_',
        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);

当我执行代码时，后面的代码将文本框的值填充为“ 123456789”，并且在渲染页面时，所有字符都已更改为项目符号，这是正确的。我遇到的问题是该文本框已被禁用，因此我无法编辑该文本框中的数据。

我删除了（通过注释掉）对disabled属性的引用，但是控件仍然呈现为禁用状态。

作为旁注，我在互联网上找到的代码原本是设计为与带有密码类型的文本框一起使用的，但是当我将TextMode设置为password时，不仅控件被呈现为禁用状态，而且字段被渲染为没有值，因此我将TextMode保留为SingleLine。

非常感谢任何建议或帮助。

谢谢！

Answer 1

据我所知，不可能输入密码，因此输入密码时，最后一个字母会显示一秒钟，然后变成项目符号或星号。

[但是您可以做的是，当用户键入密码时，可以说延迟了500毫秒，将用户到目前为止所输入的字符串存储到某个变量中，并用星号或星号替换密码字段或文本字段的内容。黑子弹。这将为您提供所需的信息。