Question

$(document).ready(function() {
    // #login-box password field
    $('#password').attr('type', 'text');
    $('#password').val('Password');
});

这应该将#password输入字段（id="password"）type password更改为普通文本字段，然后填写文本“密码”。

但是，它不起作用。为什么呢？

以下是表格：

<form enctype="application/x-www-form-urlencoded" method="post" action="/auth/sign-in">
  <ol>
    <li>
      <div class="element">
        <input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text" />
      </div>
    </li>
    <li>
      <div class="element">
        <input type="password" name="password" id="password" value="" class="input-text" />
      </div>
    </li>
    <li class="button">
      <div class="button">
        <input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit" />
      </div>
    </li>
  </ol>
</form>

Answer 1

这种行为很可能是浏览器安全模型的一部分。

编辑：的确，现在在Safari中测试，我收到错误type property cannot be changed。

编辑2：这似乎是jQuery中的一个错误。使用以下直接DOM代码可以正常工作：

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

编辑3：直接来自jQuery源代码，这似乎与IE有关（可能是一个bug或者是他们安全模型的一部分，但jQuery并不具体）：

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Answer 2

更简单......不需要创建所有动态元素。只需创建两个单独的字段，一个是“真正的”密码字段（type =“password”），另一个是“假”密码字段（type =“text”），将假字段中的文本设置为浅灰色并且将初始值设置为“密码”。然后使用jQuery添加几行Javascript，如下所示：

    <script type="text/javascript">

        function pwdFocus() {
            $('#fakepassword').hide();
            $('#password').show();
            $('#password').focus();
        }

        function pwdBlur() {
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }
        }
    </script>

    <input style="color: #ccc" type="text" name="fakepassword" id="fakepassword" value="Password" onfocus="pwdFocus()" />
    <input style="display: none" type="password" name="password" id="password" value="" onblur="pwdBlur()" />

因此，当用户输入'假'密码字段时，它将被隐藏，真实字段将被显示，焦点将移动到真实字段。他们永远无法在虚假领域输入文字。

当用户离开真实密码字段时，脚本会看到它是否为空，如果是，则会隐藏真实字段并显示虚假字段。

注意不要在两个输入元素之间留一个空格，因为IE会将一个位置放在另一个之后（渲染空间），当用户进入/退出时，该字段将会移动。

Answer 3

一步解决方案

$('#password').get(0).type = 'text';

Answer 4

如今，你可以使用

$("#password").prop("type", "text");

但当然，你应该真的这样做

<input type="password" placeholder="Password" />

除了IE之外的所有内容。还有占位符垫片在那里模仿IE中的功能。

Answer 5

更多跨浏览器解决方案......我希望这一点可以帮助那些人。

此解决方案尝试设置type属性，如果失败，则只创建一个新的<input>元素，保留元素属性和事件处理程序。

changeTypeAttr.js（GitHub Gist）：

/* x is the <input/> element
   type is the type you want to change it to.
   jQuery is required and assumed to be the "$" variable */
function changeType(x, type) {
    x = $(x);
    if(x.prop('type') == type)
        return x; //That was easy.
    try {
        return x.prop('type', type); //Stupid IE security will not allow this
    } catch(e) {
        //Try re-creating the element (yep... this sucks)
        //jQuery has no html() method for the element, so we have to put into a div first
        var html = $("<div>").append(x.clone()).html();
        var regex = /type=(\")?([^\"\s]+)(\")?/; //matches type=text or type="text"
        //If no match, we add the type attribute to the end; otherwise, we replace
        var tmp = $(html.match(regex) == null ?
            html.replace(">", ' type="' + type + '">') :
            html.replace(regex, 'type="' + type + '"') );
        //Copy data from old element
        tmp.data('type', x.data('type') );
        var events = x.data('events');
        var cb = function(events) {
            return function() {
                //Bind all prior events
                for(i in events)
                {
                    var y = events[i];
                    for(j in y)
                        tmp.bind(i, y[j].handler);
                }
            }
        }(events);
        x.replaceWith(tmp);
        setTimeout(cb, 10); //Wait a bit to call function
        return tmp;
    }
}

Answer 6

这适合我。

$('#password').replaceWith($('#password').clone().attr('type', 'text'));

Answer 7

使用jQuery的终极方法：

将原始输入字段隐藏在屏幕之外。

$("#Password").hide(); //Hide it first
var old_id = $("#Password").attr("id"); //Store ID of hidden input for later use
$("#Password").attr("id","Password_hidden"); //Change ID for hidden input

通过JavaScript动态创建新的输入字段。

var new_input = document.createElement("input");

将ID和值从隐藏输入字段迁移到新输入字段。

new_input.setAttribute("id", old_id); //Assign old hidden input ID to new input
new_input.setAttribute("type","text"); //Set proper type
new_input.value = $("#Password_hidden").val(); //Transfer the value to new input
$("#Password_hidden").after(new_input); //Add new input right behind the hidden input

要绕过像type property cannot be changed这样的IE上的错误，您可能会发现以下内容非常有用：

将click / focus / change事件附加到新的input元素，以便在隐藏输入上触发相同的事件。

$(new_input).click(function(){$("#Password_hidden").click();});
//Replicate above line for all other events like focus, change and so on...

旧的隐藏输入元素仍在DOM内部，因此将对新输入元素触发的事件做出反应。当ID被交换时，新的输入元素将像旧的一样，并响应任何函数调用旧的隐藏输入的ID，但看起来不同。

有点棘手但工作!!! ; - ）

Answer 8

我没有在IE中测试过（因为我需要这个用于iPad网站） - 一个我无法更改HTML但我可以添加JS的表单：

document.getElementById('phonenumber').type = 'tel';

（老派JS在所有jQuery旁边都很难看！）

但是，http://bugs.jquery.com/ticket/1957链接到MSDN：“从Microsoft Internet Explorer 5开始，type属性是read / write-once，但仅当使用createElement方法创建输入元素时才添加到该文件。“所以也许你可以复制元素，更改类型，添加到DOM并删除旧元素？

Answer 9

您是否尝试过使用.prop（）？

$("#password").prop('type','text');

http://api.jquery.com/prop/

Answer 10

只需创建一个新字段即可绕过此安全事件：

var $oldPassword = $("#password");
var $newPassword = $("<input type='text' />")
                          .val($oldPassword.val())
                          .appendTo($oldPassword.parent());
$oldPassword.remove();
$newPassword.attr('id','password');

Answer 11

所有想要在所有浏览器中使用该功能的人的简单解决方案：

<强> HTML

<input type="password" id="password">
<input type="text" id="passwordHide" style="display:none;">
<input type="checkbox" id="passwordSwitch" checked="checked">Hide password

<强>的jQuery

$("#passwordSwitch").change(function(){
    var p = $('#password');
    var h = $('#passwordHide');
    h.val(p.val());
    if($(this).attr('checked')=='checked'){
        h.hide();
        p.show();
    }else{
        p.hide();
        h.show();
    }
});

Answer 12

尝试在Firefox 5中执行此操作时收到了相同的错误消息。

我使用下面的代码解决了它：

<script type="text/javascript" language="JavaScript">

$(document).ready(function()
{
    var passfield = document.getElementById('password_field_id');
    passfield.type = 'text';
});

function focusCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == defaultValue)
    {
        field.value = '';
    }
    if (type == 'pass')
    {
        field.type = 'password';
    }
}
function blurCheckDefaultValue(field, type, defaultValue)
{
    if (field.value == '')
    {
        field.value = defaultValue;
    }
    if (type == 'pass' && field.value == defaultValue)
    {
        field.type = 'text';
    }
    else if (type == 'pass' && field.value != defaultValue)
    {
        field.type = 'password';
    }
}

</script>

要使用它，只需将字段的onFocus和onBlur属性设置为以下内容：

<input type="text" value="Username" name="username" id="username" 
    onFocus="javascript:focusCheckDefaultValue(this, '', 'Username -OR- Email Address');"
    onBlur="javascript:blurCheckDefaultValue(this, '', 'Username -OR- Email Address');">

<input type="password" value="Password" name="pass" id="pass"
    onFocus="javascript:focusCheckDefaultValue(this, 'pass', 'Password');"
    onBlur="javascript:blurCheckDefaultValue(this, 'pass', 'Password');">

我也将此用作用户名字段，因此它会切换默认值。只需在调用时将函数的第二个参数设置为''。

另外值得注意的是，我的密码字段的默认类型实际上是密码，以防用户没有启用javascript或出现问题，这样他们的密码仍然受到保护。

$（document）.ready函数是jQuery，并在文档加载完成后加载。然后，将密码字段更改为文本字段。显然，您必须将'password_field_id'更改为您的密码字段的ID。

随意使用和修改代码！

希望这能帮助每个遇到同样问题的人：）

- CJ Kent

编辑：好的解决方案但不是绝对的适用于FF8和IE8但不完全适用于Chrome（16.0.912.75 ver）。加载页面时，Chrome不会显示密码文本。此外 - 当自动填充功能打开时，FF将显示您的密码。

Answer 13

试试这个的 Demo is here

$(document).delegate('input[type="text"]','click', function() { $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">'); }); $(document).delegate('input[type="password"]','click', function() { $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">'); });

Answer 14

使用它更容易：

document.querySelector('input[type=password]').setAttribute('type', 'text');

并且为了再次将其转回密码字段，（假设密码字段是文本类型为的第二个输入标记）：

document.querySelectorAll('input[type=text]')[1].setAttribute('type', 'password')

Answer 15

我猜您可以使用包含“密码”一词的背景图片，并将其更改回.focus()上的空白背景图片。

.blur() ----＆gt;图像“密码”

.focus() -----＆gt;图像没有“密码”

你也可以用一些CSS和jQuery来做。在密码字段的顶部显示一个文本字段，hide（）在焦点（）上，并专注于密码字段......

Answer 16

这适合我。

<Switch>
 <Route exact path="/" component={HomePage} />
 <Route path="/Resident" component={customer} />
 <Route path="/search" component={search} />
 <Route component={EmptyPage} />
</Switch>

    class customer extends Component {

        constructor() {
            super()
            this.setLayout = this.setLayout.bind(this)
            // Listen for changes to the current location.
            history.listen((location, action) => {
                // location is an object like window.location
                //console.log('history', location.pathname, this.setLayout(location.pathname))
                this.setLayout(location.pathname)
            })
        }

        componentWillMount() {
            this.setLayout(this.props.pathname)
        }

        setLayout(url) {
            const emptyView1 = [
                '/pages/error-page',
                '/pages/create-account',
                '/pages/login',
                '/pages/under-maintenance',
            ];

            let isEmptyView = indexOf(emptyView1, url) !== -1 ? true : false
            let currentLayout = this.props.config.layout
            if(isEmptyView && currentLayout !== 'empty-view-1') {
                this.props.setConfig('layout', 'empty-view-1')
            } else if(!isEmptyView && currentLayout !== 'default-sidebar-1') {
                this.props.setConfig('layout', 'default-sidebar-1')
            }
        }

        render() {
            let {layout, background, navbar, logo, leftSidebar, topNavigation, collapsed} = this.props.config
            // let {pathname} = this.props
            let isEmptyView = layout === 'empty-view-1' ? true : false
            return (
                <ConnectedRouter history={history}>
                    <div
                        data-layout={layout}
                        data-background={background}
                        data-navbar={navbar}
                        data-logo={logo}
                        data-left-sidebar={leftSidebar}
                        data-top-navigation={topNavigation}
                        data-collapsed={collapsed}
                    >
                        <Shortcuts />
                        <Backdrops />
                        {!isEmptyView &&
                        <RightSidebar1 />
                        }
                        {!isEmptyView &&
                        <Navbar1 />
                        }
                        <div className="container-fluid">
                            <div className="row">
                                {!isEmptyView &&
                                <LeftSidebar1 />
                                }
                                <div className="col main">
                                    <Switch>
                                        <Route path="/dashboard" component={Dashboard} />
                                        <Route path="/policies/index" component={Policies}/>
                                        <Route path="/pages/create-account" component={CreateAccount} />
                                        <Route path="/pages/empty-page" component={EmptyPage} />
                                        <Route path="/pages/under-maintenance" component={UnderMaintenance} />
                                        <Route path="/pages/error-page" component={ErrorPage} />
                                        <Route path="/pages/user-profile" component={UserProfile} />
                                        <Route path="/on-notice" component={OnNotice} />
                                        <Route path="/profile" component={UserProfile} />
                                        <Route path="/kyc-documents" component={KYCDocuments} />
                                        <Route path="/booking" component={Booking} />
                                        <Route path="/bookings" component={Bookings} />

                                        <Route path="/pay-amount" component={Payment} />
                                        <Route path="/security-deposit" component={Deposit} />
                                        <Route path="/transactions" component={Transactions} />
                                        <Route path="/notice-board" component={NoticeBoard} />
                                        <Route path="/deals" component={Deals} />

                                        <Route path="/checkin" component={Checkin} />
                                        <Route path='/subscriptions' component={MySubscriptions} />
                                        <Route path='/view-ticket' component={ViewTicket} />
                                        <Route path="/new-ticket" component={NewTicket} />
                                        <Route component={EmptyPage} />
                                    </Switch>
                                </div>
                            </div>
                        </div>
                    </div>
                </ConnectedRouter>
            )
        }
    }

    const mapStateToProps = (state, ownProps) => {
        return {
            pathname: state.router.location && state.router.location.pathname ? state.router.location.pathname : window.location.pathname,
            config: state.config,
            tickets : state.ticket
        }
    }
    const mapDispatchToProps = dispatch => {
        return {
            setConfig: (key, value) => dispatch(setConfig(key, value))
        }
    }
    export default connect(mapStateToProps, mapDispatchToProps)(customer)

Answer 17

无法更改类型属性您需要使用文本输入替换或覆盖输入，并将值发送到提交时的密码输入。

Answer 18

这是一种方法，它使用密码字段旁边的图像在查看密码（文本输入）和不看密码（密码输入）之间切换。我使用了一个＆＃34;睁眼＆＃34;并且＆＃34;闭眼＆＃34;图像，但你可以使用适合你的任何东西。它的工作方式是有两个输入/图像，点击图像后，值将从可见输入复制到隐藏输入，然后交换它们的可见性。与使用硬编码名称的许多其他答案不同，这个通常足以在页面上多次使用它。如果JavaScript不可用，它也会优雅地降级。

以下是其中两个在页面上的样子。在此示例中，密码A已通过单击其眼睛显示。

＆＃13;

$(document).ready(function() {
  $('img.eye').show();
  $('span.pnt').on('click', 'img', function() {
    var self = $(this);
    var myinp = self.prev();
    var myspan = self.parent();
    var mypnt = myspan.parent();
    var otspan = mypnt.children().not(myspan);
    var otinp = otspan.children().first();
    otinp.val(myinp.val());
    myspan.hide();
    otspan.show();
  });
});

＆＃13;

img.eye {
  vertical-align: middle;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form>
<b>Password-A:</b>
<span class="pnt">
<span>
<input type="password" name="passa">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span>
<span style="display:none">
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span>
</span>
</form>

<form>
<b>Password-B:</b>
<span class="pnt">
<span>             
<input type="password" name="passb">
<img src="eye-open.png" class="eye" alt="O" style="display:none">
</span> 
<span style="display:none">            
<input type="text">
<img src="eye-closed.png" class="eye" alt="*">
</span> 
</span>
</form>

＆＃13;

Answer 19

这样就可以了。虽然可以改进以忽略现在无关的属性。

插件：

(function($){
  $.fn.changeType = function(type) {  
    return this.each(function(i, elm) {
        var newElm = $("<input type=\""+type+"\" />");
        for(var iAttr = 0; iAttr < elm.attributes.length; iAttr++) {
            var attribute = elm.attributes[iAttr].name;
            if(attribute === "type") {
                continue;
            }
            newElm.attr(attribute, elm.attributes[iAttr].value);
        }
        $(elm).replaceWith(newElm);
    });
  };
})(jQuery);

用法：

$(":submit").changeType("checkbox");

小提琴：

http://jsfiddle.net/joshcomley/yX23U/

Answer 20

简单地说：

this.type = 'password';

，例如

$("#password").click(function(){
    this.type = 'password';
});

这假设您的输入字段在设置之前已设置为“text”。

Answer 21

jQuery.fn.outerHTML = function() {
    return $(this).clone().wrap('<div>').parent().html();
};
$('input#password').replaceWith($('input.password').outerHTML().replace(/text/g,'password'));

Answer 22

这是一个小片段，可让您更改文档中元素的type。

jquery.type.js（GitHub Gist）：

var rtype = /^(?:button|input)$/i;

jQuery.attrHooks.type.set = function(elem, value) {
    // We can't allow the type property to be changed (since it causes problems in IE)
    if (rtype.test(elem.nodeName) && elem.parentNode) {
        // jQuery.error( "type property can't be changed" );

        // JB: Or ... can it!?
        var $el = $(elem);
        var insertionFn = 'after';
        var $insertionPoint = $el.prev();
        if (!$insertionPoint.length) {
            insertionFn = 'prepend';
            $insertionPoint = $el.parent();
        }

        $el.detach().attr('type', value);
        $insertionPoint[insertionFn]($el);
        return value;

    } else if (!jQuery.support.radioValue && value === "radio" && jQuery.nodeName(elem, "input")) {
        // Setting the type on a radio button after the value resets the value in IE6-9
        // Reset value to it's default in case type is set after value
        // This is for element creation
        var val = elem.value;
        elem.setAttribute("type", value);
        if (val) {
            elem.value = val;
        }
        return value;
    }
}

通过从文档中删除input，更改type然后将其放回原来的位置，解决了这个问题。

请注意，此代码段仅针对WebKit浏览器进行了测试 - 不保证其他任何内容！

Answer 23

$('#pass').focus(function() { 
$('#pass').replaceWith("<input id='password' size='70' type='password' value='' name='password'>");
$('#password').focus();
});

<input id='pass' size='70' type='text' value='password' name='password'>

Answer 24

使用这个很容易

<input id="pw" onclick="document.getElementById('pw').type='password';
  document.getElementById('pw').value='';"
  name="password" type="text" value="Password" />

Answer 25

继承了DOM解决方案

myInput=document.getElementById("myinput");
oldHtml=myInput.outerHTML;
text=myInput.value;
newHtml=oldHtml.replace("password","text");
myInput.outerHTML=newHtml;
myInput=document.getElementById("myinput");
myInput.value=text;

Answer 26

我创建了一个jQuery扩展来在文本和密码之间切换。适用于IE8（也可能是6＆7，但未经过测试），不会失去你的价值或属性：

$.fn.togglePassword = function (showPass) {
    return this.each(function () {
        var $this = $(this);
        if ($this.attr('type') == 'text' || $this.attr('type') == 'password') {
            var clone = null;
            if((showPass == null && ($this.attr('type') == 'text')) || (showPass != null && !showPass)) {
                clone = $('<input type="password" />');
            }else if((showPass == null && ($this.attr('type') == 'password')) || (showPass != null && showPass)){
                clone = $('<input type="text" />');
            }
            $.each($this.prop("attributes"), function() {
                if(this.name != 'type') {
                    clone.attr(this.name, this.value);
                }
            });
            clone.val($this.val());
            $this.replaceWith(clone);
        }
    });
};

像魅力一样工作。您只需致电$('#element').togglePassword();即可在两者之间切换，或根据其他内容（例如复选框）提供“强制”操作的选项：$('#element').togglePassword($checkbox.prop('checked'));

Answer 27

我喜欢这种方式，更改输入元素的类型：old_input.clone（）.... 这是一个例子。有一个复选框“id_select_multiple”。如果将其更改为“selected”，则应将名为“foo”的输入元素更改为复选框。如果取消选中，它们应该再次成为单选按钮。

  $(function() {
    $("#id_select_multiple").change(function() {
     var new_type='';
     if ($(this).is(":checked")){ // .val() is always "on"
          new_type='checkbox';
     } else {
         new_type="radio";
     }
     $('input[name="foo"]').each(function(index){
         var new_input = $(this).clone();
         new_input.attr("type", new_type);
         new_input.insertBefore($(this));
         $(this).remove();
     });
    }
  )});

Answer 28

所有IE8爱好者的另一个选择，它在新的浏览器中完美运行。您可以只为文本着色以匹配输入的背景。如果您有一个字段，当您单击/聚焦该字段时，这会将颜色更改为黑色。我不会在公共网站上使用它，因为它会“混淆”大多数人，但我在ADMIN部分使用它，只有一个人可以访问用户密码。

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OR -

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

当您离开现场时，这也需要将文本更改为白色。简单，简单，简单。

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[另一种选择] 现在，如果您要检查的是多个字段，所有字段都与我使用的字段相同，请在要隐藏文本的字段中添加一个“pass”类。将密码字段类型设置为'文本'。这样，只会更改类别为“pass”的字段。

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

这是第二部分。离开现场后，这会将文本更改为白色。

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

Answer 29

我只是做了以下更改输入的类型：

<nav>           
    <ul>         
      <li><a href="#">Carrinho</a></li>
      <li><a href="#">Lupa</a></li>
      <li><a href="#">Free Training</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">ShowQase</a></li>
      <li><a href="#">Shop</a></li>
      <li><a href="#">Course</a></li>
      <li><a href="#">About</a></li>           
    </ul>           
</nav>

它有效。

我之所以需要这样做，是因为我在ASP NET Core 3.1项目中使用了jQuery UI datepickers，并且它们在基于Chromium的浏览器上无法正常工作（请参阅：https://stackoverflow.com/a/61296225/7420301）。

使用jQuery更改输入字段的类型

29 个答案: