Change type of an Input element using jquery

Question

I am trying to change type of input, specifically after click into input I need to change type="text" to type="date".

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

    });
</script>

I want to accomplish this for a iphone App. This is not working in iphone 4. How can do this?

Can I ask you reason for wanting to do this? I am pretty sure there must be a better way. — Undefined
– Undefined, Commented Aug 8, 2012 at 6:21
In iphone 4 the placeholder doesnot show for input type dat. So I want to change the type after clicking the field — Sreehari
– Sreehari, Commented Aug 8, 2012 at 6:23
Better have two input fields and hide the text field and show the date field on click event. — Ankur
– Ankur, Commented Aug 8, 2012 at 6:25
You don't need a placeholder on a date input - they come with widgets to do the formatting for you. The problem is that you appear to be using the placeholder as a replacement for a <label> which the specification is very explicit that you should not do. — Quentin
– Quentin, Commented Aug 8, 2012 at 6:34
The placeholder attribute should not be used as an alternative to a label. and The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry. A hint could be a sample value or a brief description of the expected format. — Quentin
– Quentin, Commented Aug 8, 2012 at 6:34

R3tep · Accepted Answer · 2017-06-12 09:04:31Z

33

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/

edited Jun 12, 2017 at 9:04

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

answered Aug 8, 2012 at 6:40

Nishu Tayal

20.9k8 gold badges53 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2012-08-08 06:58:39Z

7

It's a property, so prop() will do it :

$("#dob").on('click', function(){
     $(this).prop('type', 'date');
});

And remember to wrap that in a document.ready function !

FIDDLE

edited Aug 8, 2012 at 6:58

answered Aug 8, 2012 at 6:24

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

coolguy · Accepted Answer · 2012-08-08 06:27:12Z

0

If you use Earlier version of Jquery

$('body').delegate('#dob','click',function(){
            $(this).attr('type', 'date');

      });

Or if you use latest see @adeno 's answer

answered Aug 8, 2012 at 6:27

coolguy

7,9549 gold badges48 silver badges72 bronze badges

Comments

Undefined · Accepted Answer · 2012-08-08 06:29:36Z

0

See this working jsfiddle.

You can't change the type of an input due to restrictions in the browser using .attr. Note this warning you receive from the console:

Uncaught Error: type property can't be changed

You can change the type by using .prop()

$("#dob").on('click', function(){
    $(this).prop('type', 'date');
});

I think there may be a bit of an underlying problem here. Would the user not be confused by the type of text-box changing?

If at all possible you should try and change the type of the text-box before showing it to the user.

answered Aug 8, 2012 at 6:29

Undefined

11.4k5 gold badges40 silver badges62 bronze badges

Comments

user3226778 · Accepted Answer · 2014-01-26 08:36:41Z

0

I think the correct solution for your problem is using the .focus and the .prop properties.

<script>
    $("#dob").focus(function () {
        $(this).prop('type', 'date');

    });
</script>

answered Jan 26, 2014 at 8:36

user3226778

1

Comments

ccrez · Accepted Answer · 2016-09-13 04:53:30Z

0

for me using prop directly on the element was not working, this however worked for me after a lot of fiddling, so I wanted to share and maybe save someone the headache.

$(document).on('change', '#showPass', function () {
    if ($(this).is(':checked')) {
        $(this).parents('form').find('#passField').prop("type", "text");
    } else {
        $(this).parents('form').find('#passField').prop("type", "password");
    }
});

answered Sep 13, 2016 at 4:53

ccrez

8726 silver badges9 bronze badges

Collectives™ on Stack Overflow

Change type of an Input element using jquery

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related