在密码字段中以纯文本格式显示默认值

时间:2011-05-16 16:24:19

标签: jquery jquery-mobile

是否可以将密码字段中的默认文本显示为纯文本?

使用以下代码,文本字段值显示为“ * * ”而不是“密码”

由于

<div id="fnameDiv" data-role="fieldcontain">    
    <input id="password" name="password" type="password" value="Password"/>
</div>

1 个答案:

答案 0 :(得分:2)

直播示例:http://jsfiddle.net/t4BQm/18/

HTML:

<div data-role="page" data-theme="b" id="jqm-home"> 
    <div data-role="content">
        <div id="fnameDiv" data-role="fieldcontain">  
            <label for="name">Password:</label>  
            <input id="password" name="password" type="password" placeholder="Password"/>
        </div>
        <div id="fnameDivHidden" class="hidden_div" data-role="fieldcontain">  
            <label for="name">Password:</label>  
            <input id="password_hidden" name="password_hidden" type="text"/>
        </div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-role="controlgroup" data-type="horizontal">
                <legend>Display Password:</legend>
                     <input type="radio" name="show_password" id="no" value="no" checked="checked" />
                     <label for="no">No</label>

                     <input type="radio" name="show_password" id="yes" value="yes" />
                     <label for="yes">Yes</label>
            </fieldset>
        </div>
    </div>
</div>

JS:

$('[name=show_password]').change(function() {
    var show = $('input[name=show_password]:checked').val() == 'yes';

    // toggle the password and the hidden text inputs
    $('#password_hidden').val($('#password').val());

    if(show) {
        $('#fnameDivHidden').show();
        $('#fnameDiv').hide();
    } else {
        $('#fnameDivHidden').hide();
        $('#fnameDiv').show();
    }
});

$('#fnameDivHidden').hide();

这可能是相关的:change type of input field with jQuery