toggle form field type with jQuery

Is there a way to add a checkbox or radio buttons on a page to toggle form fields between input type 开发者_运维百科"text" and "password"?

The reason I put jQuery in subject line because I'm trying to use it exclusively and I have a lot of confidence in its potential. :)

Thanks.

UPDATE: I need to toggle because I need the user an ability to come back and review previously entered input. (Tip: This is not a login script.)

I ended up simplifying this into the following solution:

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

You'll want to use a little clever jquery to accomplish this illusion.

LIVE DEMO: http://jsfiddle.net/aaK9E/2/

Given the following 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;}

You can use the checkbox as a toggle like this

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

Now, you'll need to make sure the two text boxes always have the same value. When one changes, you want to change the other one and visa-versa. For that you'll need to use the following 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());
});

If both passtext and passpass are in the same form, they will both be passed to the receiver, and they will both have the same value since we are synching them using (for example with PHP) $variableName = $_REQUEST['passpass'];

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);
        }
    })
}

You could use this solution instead? http://css-tricks.com/better-password-inputs-iphone-style/

You can simply toggle the input password fields type property to password/text to achieve the behaviour.

Html Example -

<!-- 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";
    }
}

You cannot change a field type from password to text and vise versa. You can create a password and text fields on top of each other and change the visibility/z-index of the field with a radio button

I answered a similar question on this thread.

The solution is a jQuery plugin (that I wrote) that supports multiple password fields. The source is posted on github.

Sample usage:

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

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