Change Type of Input Field with Jquery

change type of input field with jQuery

It's very likely this action is prevented as part of the browser's security model.

Edit: indeed, testing right now in Safari, I get the error type property cannot be changed.

Edit 2: that seems to be an error straight out of jQuery. Using the following straight DOM code works just fine:

var pass = document.createElement('input');
pass.type = 'password';
document.body.appendChild(pass);
pass.type = 'text';
pass.value = 'Password';

Edit 3: Straight from the jQuery source, this seems to be related to IE (and could either be a bug or part of their security model, but jQuery isn't specific):

// We can't allow the type property to be changed (since it causes problems in IE)
if ( name == "type" && jQuery.nodeName( elem, "input" ) && elem.parentNode )
    throw "type property can't be changed";

Change type of an Input element using jquery

Use this code :

<input type="text" placeholder="DOB" id="dob" name="dob"  />
<script>
   $("#dob").click(function(){
        $(this).prop('type', 'date');

  });
</script>

Here is the fiddle : http://jsfiddle.net/HNKkW/

jQuery change input type

You can't do this with jQuery, it explicitly forbids it because IE doesn't support it (check your console you'll see an error.

You have to remove the input and create a new one if that's what you're after, for example:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

You can give it a try here

To be clear on the restriction, jQuery will not allow changing type on a <button> or <input> so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console:

Error: type property can't be changed

jQuery change input text value

no, you need to do something like:

$('input.sitebg').val('000000');

but you should really be using unique IDs if you can.

You can also get more specific, such as:

$('input[type=text].sitebg').val('000000');

EDIT:

do this to find your input based on the name attribute:

$('input[name=sitebg]').val('000000');

How to change the input type property in jQuery?

$('input:password').prop('type','text');

Demo --> http://jsfiddle.net/47hem/

jQuery change input type dynamically

You can solve this with two steps:

1. Get parent of current click object with $(this).parent()
2. Search in this parent for a inputfield with .find()

$(document ).ready(function() {
    $( ".show-password" ).on( "click", function(e) {
        e.preventDefault();
        $(this).toggleClass("fa-eye fa-eye-slash");
        // First get parent, then find the correct input within that parent.
        var input = $(this).parent().find('input');
        input.attr('type') === 'password' ? input.attr('type','text') : input.attr('type','password');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="password-type">
    <input 
        id="password" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="New Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>

<div class="password-type">
    <input 
        id="password2" 
        type="password" 
        name="password" 
        required 
        autocomplete="current-password"
        placeholder="Confirm Password"
        >
        <span class="far fa-eye show-password-eyes show-password">EYE</span>
</div>

How do I implement onchange of input type= text with jQuery?

You can use .change()

$('input[name=myInput]').change(function() { ... });

However, this event will only fire when the selector has lost focus, so you will need to click somewhere else to have this work.

If that's not quite right for you, you could use some of the other jQuery events like keyup, keydown or keypress - depending on the exact effect you want.

JQuery: detect change in input field

You can bind the 'input' event to the textbox. This would fire every time the input changes, so when you paste something (even with right click), delete and type anything.

$('#myTextbox').on('input', function() {
    // do something
});

If you use the change handler, this will only fire after the user deselects the input box, which may not be what you want.

There is an example of both here: http://jsfiddle.net/6bSX6/

Detect changed input text box

You can use the input Javascript event in jQuery like this:

$('#inputDatabaseName').on('input',function(e){
    alert('Changed!')
});

In pure JavaScript:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

Or like this:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

---

Related Topics