change html input type by JS?

Question

How to do this through the tag itself change type from text to password

<input type='text' name='pass'  />

Is it possible to insert JS inside the input tag itself to change type='text' to type='password'?

Answer 1

$(".show-pass").click(function (e) {
    e.preventDefault();
    var type = $("#signupform-password").attr('type');
    switch (type) {
        case 'password':
        {
            $("#signupform-password").attr('type', 'text');
            return;
        }
        case 'text':
        {
            $("#signupform-password").attr('type', 'password');
            return;
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="password" class="show-pass">

Answer 2

Try:

<input id="hybrid" type="text" name="password" />

<script type="text/javascript">
    document.getElementById('hybrid').type = 'password';
</script>

Answer 3

This is not supported by some browsers (IE if I recall), but it works in the rest:

document.getElementById("password-field").attributes["type"] = "password";

or

document.getElementById("password-field").attributes["type"] = "text";

Answer 4

I had to add a '.value' to the end of Evert's code to get it working.

Also I combined it with a browser check so that input type="number" field is changed to type="text" in Chrome since 'formnovalidate' doesn't seem to work right now.

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)
    document.getElementById("input_id").attributes["type"].value = "text";

Answer 5

Yes, you can even change it by triggering a event

<input type='text' name='pass'  onload="(this.type='password')" />

Answer 6

Changing the type of an <input type=password> throws a security error in some browsers (old IE and Firefox versions).

You’ll need to create a new input element, set its type to the one you want, and clone all other properties from the existing one.

I do this in my jQuery placeholder plugin: https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.js#L80-84

To work in Internet Explorer:

• dynamically create a new element
• copy the properties of the old element into the new element
• set the type of the new element to the new type
• replace the old element with the new element

The function below accomplishes the above tasks for you:

<script>
function changeInputType(oldObject, oType) {
    var newObject = document.createElement('input');
    newObject.type = oType;
    if(oldObject.size) newObject.size = oldObject.size;
    if(oldObject.value) newObject.value = oldObject.value;
    if(oldObject.name) newObject.name = oldObject.name;
    if(oldObject.id) newObject.id = oldObject.id;
    if(oldObject.className) newObject.className = oldObject.className;
    oldObject.parentNode.replaceChild(newObject,oldObject);
    return newObject;
}
</script>