切換窗體字段類型與jQuery

Question

有沒有辦法在頁面上添加複選框或單選按鈕來切換輸入類型「文本」和「密碼」之間的表單字段？

我把jQuery放在主題行中的原因是因爲我試圖獨佔使用它，並且我對它的潛力有很大的信心。 :)

謝謝。

---

更新： 我需要切換，因爲我需要的用戶回來查看以前輸入的輸入的能力。 （提示：這不是登錄腳本。）

Answer 1

你會想用一個聰明的小jquery來完成這個錯覺。

現場演示：http://jsfiddle.net/aaK9E/2/

考慮下面的HTML/CSS：

HTML

<input type="text" size="50" id="t" name="passtext" /> 
<input type="password" size="50" id="p" name="passpass" /><br /> 
<input type="checkbox" id="c">Show Password 

CSS

#t{display:none;} 

您可以使用複選框作爲一個切換這樣

var showPass=false; 
$('#c').change(function(){ 
    showPass = ($('#c:checked').length>0); 
    if (showPass){ 
     $('#p').hide(); 
     $('#t').show(); 
    }else{ 
     $('#t').hide(); 
     $('#p').show(); 
    } 
}); 

現在，你需要確保兩個文本框始終具有相同的值。當一個變化時，你想改變另一個，反之亦然。對於那些你需要使用下面的JS

$('#p').change(function(){ 
    if (!showPass) //password box is showing. sync its value to the textbox 
     $('#t').val($('#p').val()); 
}); 
$('#t').change(function(){ 
    if (showPass) //textbox is showing. sync its value to the password box 
     $('#p').val($('#t').val()); 
}); 

如果同時passtext和passpass都以相同的形式，他們都將被傳遞到接收器，並且它們都將具有相同的價值，因爲我們synching他們使用（例如使用PHP）$variableName = $_REQUEST['passpass'];

Answer 2

您無法將字段類型從密碼更改爲文本，反之亦然。你可以在彼此頂部創建一個密碼和文本字段，並用單選按鈕改變字段的可見性/ z-索引

Answer 3

您可以使用此解決方案嗎？ http://css-tricks.com/better-password-inputs-iphone-style/

Answer 4

我結束了簡化成以下的解決方案是：

$('input#checkbox').change(function(){ 
    var type = ($(this).is(':checked') ? 'text' : 'password'), 
     input = $('input#password'), 
     replace = input.clone().attr('type', type) 
     input.replaceWith(replace); 
}); 

Answer 5

我回答過類似的問題在這個thread。

解決方案是一個支持多個密碼字段的jQuery插件（我寫的）。來源張貼於github。

使用範例：

<input type="password" id="inputGroup1"> 
<input type="password" id="inputGroup2"> 
<label> 
    <input type="checkbox" class="input-mask" data-toggle='["inputGroup1", "inputGroup2"]'>Toggle Password 
</label> 
<script> 
$('.input-mask').passwordToggle(); 
</script> 

Answer 6

instead of cloning input type, you can use the simple logic of toggling. 
handle--> the button which will cause event. 
target--> target input on which you want the toggle to happen. 
event type--> event name on which given button will cause toggle on target. 
typeChange--> name of type which you want to alter example "text" if you want password type to text type. 

    function type_toggle(handle, target, eventType, typeChange) { 
    var targetType = $(target).prop("type"); 
    $(handle).on(eventType, function() { 
     if ($(target).prop("type") !== typeChange) { 
      $(target).prop("type", typeChange); 
     } else { 
      $(target).prop("type", targetType); 
     } 
    }) 
}