简体   繁体   中英

HTML input fields placeholder in IE

I have used a jquery ( From this source ) solution to make placeholder to show in IE but for some reason it is not working for hidden fields in my page.

If you look at this DEMO here you can click on Add person button once u enter the adress and zip details, by clicking on Add person you can create some text fields.

And the problem is placeholder is not showing for those newly generated fields. Also wht the validation message of zip is displayed by default.

$(function() {
    var input = document.createElement("input");
    if(('placeholder' in input)==false) { 
        $('[placeholder]').focus(function() {
            var i = $(this);
            if(i.val() == i.attr('placeholder')) {
                i.val('').removeClass('placeholder');
                if(i.hasClass('password')) {
                    i.removeClass('password');
                    this.type='password';
                }           
            }
        }).blur(function() {
            var i = $(this);    
            if(i.val() == '' || i.val() == i.attr('placeholder')) {
                if(this.type=='password') {
                    i.addClass('password');
                    this.type='text';
                }
                i.addClass('placeholder').val(i.attr('placeholder'));
            }
        }).blur().parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var i = $(this);
                if(i.val() == i.attr('placeholder'))
                    i.val('');
            })
        });
    }

The jQuery code is configuring events only for elements that exist at the time that the code is run. Elements created afterward will not have those events attached to them.

In order to have a dynamic event that works with new elements that are created after the event is setup, you need to use the jQuery $.on() method rather than the $().focus() or $().blur() methods.

You should replace your existing event handlers like so:

$('[placeholder]').on("focus", function(){ .... });

this will make your placeholder events react to dynamically created elements.

Alternatively, you might consider trying out one of the other placeholder polyfill scripts that are available -- there are quite a few of them. See here for a few links.

Working fiddle of your code:

$('.test').on('click', function () {
        if(!$("#signupForm").valid()){
            return;
        }            
        if (c<5){
            $('#loops').append( HTMLloop(++c) );
            setPlaceholder()
        }            
    });

needed to call placeholder functionality after creating new fields

this is a coll placeholder plugin .

See

.test{
display:inline-block;
background:red}

For message of zip

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM