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

更改输入字段

关注

发信

关注(28)粉丝(399)

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

本文介绍了使用 jQuery 更改输入字段的类型的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

$(document).ready(function() {//#login-box 密码字段$('#password').attr('type', 'text');$('#password').val('密码');});

这应该改变 #password 输入字段(带有 id="password")，它是 type password> 到一个普通的文本字段，然后填写文本密码".

但是它不起作用.为什么?

表格如下:

<ol><li><div class="元素"><input type="text" name="username" id="username" value="Prihlasovacie meno" class="input-text"/>

<li><div class="元素"><input type="password" name="password" id="password" value="" class="input-text"/>

<li class="按钮"><div class="button"><input type="submit" name="sign_in" id="sign_in" value="Prihlásiť" class="input-submit"/>

</ol></表单>

解决方案

作为浏览器安全模型的一部分，很可能会阻止此操作.

确实，现在在 Safari 中进行测试，我收到错误 type 属性无法更改.

编辑 2:这似乎是 jQuery 中的一个错误.使用以下直接的 DOM 代码效果很好:

var pass = document.createElement('input');pass.type = '密码';document.body.appendChild(pass);pass.type = '文本';pass.value = '密码';

编辑 3:直接来自 jQuery 源代码，这似乎与 IE 有关(并且可能是错误或其安全模型的一部分，但 jQuery 不是特定的):

//我们不能允许更改类型属性(因为它会导致 IE 出现问题)if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )throw "类型属性不能改变";

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

This is supposed to change the #password input field (with id="password") that is of type password to a normal text field, and then fill in the text "Password".

It doesn’t work, though. Why?

Here is the form:

<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>

解决方案

It's very likely this action is prevented as part of the browser's security model.

Edit: indeed, testing right now in Safari, I get the error type property cannot be changed.

Edit 2: that seems to be an error straight out of jQuery. Using the following straight DOM code works just fine:

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

Edit 3: Straight from the jQuery source, this seems to be related to IE (and could either be a bug or part of their security model, but jQuery isn't specific):

// 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";

这篇关于使用 jQuery 更改输入字段的类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-25 15:54