使用jQuery複選框將密碼字段更改爲文本

8

這是你在尋找什麼？

<html> 
<head> 
<script> 
    function changeType() 
    { 
     document.myform.txt.type=(document.myform.option.value=(document.myform.option.value==1)?'-1':'1')=='1'?'text':'password'; 
    } 
</script> 
</head> 

<body> 
    <form name="myform"> 
     <input type="text" name="txt" /> 
     <input type="checkbox" name="option" value='1' onchange="changeType()" /> 
    </form> 
</body> 
</html>

來源

2009-12-28 18:45:14

+0

歡迎您:-) – 2009-12-28 19:50:45

0

勾選複選框時使用onChange事件，然後將輸入的類型切換爲文本/密碼。

例子：

<input type="checkbox" onchange="tick(this)" /> 
<input type="input" type="text" id="input" /> 
<script> 
function tick(el) { 
$('#input').attr('type',el.checked ? 'text' : 'password'); 
} 
</script>

來源

2009-12-28 18:21:56 watain

0

我相信你可以打電話

$('#inputField').attr('type','text');

和

$('#inputField').attr('type','password');

取決於複選框狀態。

來源

2009-12-28 18:23:16 KingErroneous

+0

無法在IE中，考慮到IE唯一的，設置它曾經統治輸入元素的類型屬性。不是一個jQuery的bug – 2009-12-28 18:44:36

0

我在生產中有以下幾項。它克隆了一個具有切換類型的新字段。

toggle_clear_password = function(fields) { 

    // handles a list of fields, or just one of course 
    fields.each(function(){ 
    var orig_field = $(this); 
    var new_field = $(document.createElement('input')).attr({ 
     name: orig_field.attr('name'), 
     id: orig_field.attr('id'), 
     value: orig_field.val(), 
     type: (orig_field.attr('type') == 'text'? 'password' : 'text') 
    }) 
    new_field.copyEvents(orig_field); // jquery 'copyEvents' plugin 
    orig_field.removeAttr('name'); // name clashes on a form cause funky submit-behaviour 
    orig_field.before(new_field); 
    orig_field.remove(); 
    }); 
}

JQuery不只是讓你取得type屬性並改變它，至少不是我最後一次嘗試。

來源

2009-12-28 18:24:39

0

切換複選框的焦點事件和determain複選框的狀態並更新字段nesscarry

$box = $('input[name=checkboxName]'); 

    $box.focus(function(){ 
     if ($(this).is(':checked')) { 
      $('input[name=PasswordInput]').attr('type', 'password');  
     } else { 
      $('input[name=PasswordInput]').attr('type', 'text'); 
     } 
    })

來源

2009-12-28 18:26:09 nwhiting

2

更新：活生生的例子here

可更換式與$('#blahinput').attr('type','othertype')是不可能在IE中，考慮到IE的only-爲輸入元素的type屬性設置一次規則。

您需要刪除文本輸入並添加密碼輸入，反之亦然。

$(function(){ 
    $("#show").click(function(){ 
    if($("#show:checked").length > 0){ 
     var pswd = $("#txtpassword").val(); 
     $("#txtpassword").attr("id","txtpassword2"); 
     $("#txtpassword2").after($("<input id='txtpassword' type='text'>")); 
     $("#txtpassword2").remove(); 
     $("#txtpassword").val(pswd); 
    } 
    else{ // vice versa 
     var pswd = $("#txtpassword").val(); 
     $("#txtpassword").attr("id","txtpassword2"); 
     $("#txtpassword2").after($("<input id='txtpassword' type='password'>")); 
     $("#txtpassword2").remove(); 
     $("#txtpassword").val(pswd); 
    } 
    }); 
})

活生生的例子here

來源

2009-12-28 18:33:33

+1

更新：我不知道這個問題的時間，但如果你現在嘗試使用.prop（'type'），你的第一個代碼就可以工作。 – fredlegrain 2012-11-05 10:23:20

+0

@fredlegrain不要在IE8 – 2015-01-09 15:07:13

0

<html> 
<head> 
<script> 
    $(function(){ 
     $("#changePass").click(function(){ 
      if ($("#txttext").hasClass("hide")){ 
       $("#txttext").val($("#txtpass").val()).removeClass("hide"); 
       $("#txtpass").addClass("hide"); 
      } else if ($("#txtpass").hasClass("hide")){ 
       $("#txtpass").val($("#txttext").val()).removeClass("hide"); 
       $("#txttext").addClass("hide"); 
      } 
     }); 
    }); 
</script> 
<style> 
    .hide{display:none;} 
</style> 
</head> 
<body> 
    <form id="myform"> 
     <input type="text" id="txtpass" type='password'/> 
     <input class="hide" type="text" id="txttext" type='text'/> 
     <button id="changePass">change</button> 
    </form> 
</body> 
</html>

來源

2009-12-28 19:08:03

0

的oncheck

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

onuncheck

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

來源

2012-03-05 08:37:03 gsoni

0

.attr（ '類型'）被阻斷jQuery開發團隊，因爲它不會與IE瀏覽器的一些版本。

考慮使用此代碼：

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

來源

2012-11-05 10:28:20 fredlegrain

0

這可以更簡單的實現：

<form name="myform"> 
    <input type="password" name="password" /> 
    <input type="checkbox" name="showPassword" onchange="togglePasswordVisibility()" /> 
</form> 

<script> 
    function togglePasswordVisibility() { 
     $('#password').attr('type', $('#showPassword').prop('checked') ? 'text' : 'password'); 
    } 
</script>

作品的jQuery 1。6+

來源

2014-01-21 17:54:46

1

你可以使用一些這樣的事

$("#showHide").click(function() { 
       if ($(".password").attr("type")=="password") { 
        $(".password").attr("type", "text"); 
       } 
       else{ 
        $(".password").attr("type", "password"); 
       } 

    });

訪問此處，瞭解http://voidtricks.com/password-show-hide-checkbox-click/

來源

2014-04-01 02:38:45

使用jQuery複選框將密碼字段更改爲文本

回答

相關問題