How to remove and add input type with jQuery

Question

Hello Im trying to create a login, everything its ok but in my password input I want a span that when user click on it show the password and when click again hide the password at the moment I only have the first step (show the password).

Here is the code

Answer 1

You should try with this:

$('#xd').on('mouseup', function () {
    $('#Contraseña').attr('type', 'password')
});

$('#xd').on('mousedown', function () {
    $('#Contraseña').attr('type', 'text')
});

Code here

Answer 2

Use this code

 $("button").click(function(){ if ($("input").attr("type") == "password"){ $("input").attr("type", "text"); $(this).text("Hide password"); } else { $("input").attr("type", "password"); $(this).text("Show password"); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="password" /> <button>Show password</button> 

Answer 3

You can just create a variable & initially assign it to false , Now on click change this variable to true and toggle the attr type

var shown=false;
    $('#xd').click(function () {
      shown=!shown;
        $('#Contraseña').attr('type', shown ? 'text' : 'password')
    });

Answer 4

Try this ;)

<label for="pass_field_id">Password:</label>
<input type="password" value="your_passowrd" name="password" id="pass_field_id" />
<a href="#" onclick="show_hide_password('pass_field_id');" id="showhide">Show</a>

<script>
function swapInput(tag, type) {
  var el = document.createElement('input');
  el.id = tag.id;
  el.type = type;
  el.name = tag.name;
  el.value = tag.value;
  tag.parentNode.insertBefore(el, tag);
  tag.parentNode.removeChild(tag);
}

function show_hide_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){

        swapInput(tag, 'text');
        tag2.innerHTML = 'Hide';

    } else {
        swapInput(tag, 'password');
        tag2.innerHTML = 'Show';
    }
}
</script>