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

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

这是为了将password类型的#password输入字段(id="password")更改为普通的文本字段，然后填充文本"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>

当前回答

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

为了解决IE上的错误，比如类型属性不能被改变，你可能会发现下面的方法很有用:

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

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

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

有点棘手，但有效!!: -)

2010-01-18 06:22:35

其他回答

只需要创建一个新的字段来绕过这个安全的东西:

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

2009-10-09 15:00:37

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

为了解决IE上的错误，比如类型属性不能被改变，你可能会发现下面的方法很有用:

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

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

有点棘手，但有效!!: -)

2010-01-18 06:22:35

Here is a method which uses an image next to the password field to toggle between seeing the password (text input) and not seeing it (password input). I use an "open eye" and "closed eye" image, but you can use whatever suits you. The way it works is having two inputs/images and upon clicking the image, the value is copied from the visible input to the hidden one, and then their visibility is swapped. Unlike many of the other answers which use hardcoded names, this one is general enough to use it multiple times on a page. It also degrades gracefully if JavaScript is unavailable.

这是其中两个在一页上的样子。在这个例子中，密码a是通过点击它的眼睛来显示的。

$(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(); }); }); img.eye { vertical-align: middle; } <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>

2016-12-24 13:11:31

我在尝试在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或出现错误，这样他们的密码仍然受到保护。

美元(文档)。ready函数是jQuery，当文档加载完成时加载。然后将密码字段更改为文本字段。显然，你必须将“password_field_id”更改为密码字段的id。

请随意使用和修改代码!

希望这能帮助到每个和我有同样问题的人:)

——肯特

编辑: 很好的解决方案，但不是绝对的。在FF8和IE8上工作，但不完全在Chrome上(16.0.912.75版本)。Chrome浏览器在页面加载时不显示密码文本。另外，当自动填充开启时，FF将显示您的密码。

2011-07-02 13:49:15

我猜你可以使用一个包含单词“password”的background-image，并在.focus()上将其更改为空的background-image。

.blur() ----> image with "password"

.focus() ----->图像没有“密码”

你也可以用一些CSS和jQuery来实现。有一个文本字段显示在密码字段的顶部，hide()是在focus()和聚焦在密码字段…

2011-10-28 02:01:02

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

推荐文章

最新文章

标签