Question

有没有办法在页面上添加复选框或单选按钮以在输入类型“text”和“password”之间切换表单字段？

我把jQuery放在主题行中的原因是因为我试图独占使用它，我对它的潜力有很大的信心。 :)

感谢。

更新：我需要切换，因为我需要用户能够返回并查看先前输入的输入。（提示：这不是登录脚本。）

Answer 1

我最终将其简化为以下解决方案：

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

Answer 2

你会想要用一点巧妙的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都是相同的形式，它们都将传递给接收者，并且它们都具有相同的值，因为我们正在使用它们进行同步（例如使用PHP ）$variableName = $_REQUEST['passpass'];

Answer 3

您无法将字段类型从密码更改为文本，反之亦然。您可以在彼此之上创建密码和文本字段，并使用单选按钮更改字段的可见性/ z-index

Answer 4

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

Answer 5

// find elements
jQuery("input[type=checkbox]").click(function() {
	var pwdType = jQuery("#pwd").attr("type");
	var newType = (pwdType === "password")?"text":"password";
	jQuery("#pwd").attr("type", newType);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <div class="row">
    <form class="form-horizontal" action="/action_page.php">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Email:</label>
        <div class="col-sm-10 ">
          <input type="email" class="form-control" id="email" placeholder="Enter email" value="nikhil_gyan@yahoo.co.in">
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-sm-2" for="pwd">Password:</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="pwd" placeholder="Enter password" value="password">
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label><input type="checkbox"> Show Password</label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">Submit</button>
        </div>
      </div>
      </form>
    </div>  
</div>

Answer 6

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

您只需将输入的密码字段的type属性切换为password / text即可实现行为。

HTML示例-

<!-- Password field -->
Password: <input type="password" value="FakePSW" id="myInput">

<!-- An element to toggle between password visibility -->
<input type="checkbox" onclick="myFunction()">Show Password

JavaScript-

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
       x.type = "text";
    } else {
       x.type = "password";
    }
}

使用jQuery切换表单字段类型

7 个答案: