0

I have searched and found multiple answers simply stating to wrap my function in a click handler, although I want it to run on page load, or once my javascript has finished inserting all the html.

I have a whole page that's dynamically created. I'm using this snippet to fix Placeholders for IE. It does work, although not with live created elements. 

$(document).ready(function(){    
    // Placeholder Fix for IE < 9    
    $("[placeholder]").each(function() {        
        var val = $(this).attr("placeholder");
        if ( this.value === "" ) {
            this.value = val;
        }
        $(this).focus(function() {
            if ( this.value == val ) {
                this.value = "";
            }
        }).blur(function() {
            if ( $.trim(this.value) === "" ) {
                this.value = val;
            }
        });
    });
    // Clear default placeholder values on form submit
    $('form').submit(function() {
        $(this).find("[placeholder]").each(function() {
            if ( this.value == $(this).attr("placeholder") ) {
                this.value = "";
            }
        });
    });
});

I'm adding in form elements with js, example:

$('body').append('<input type="text" placeholder="placeholdertext" />');

Can someone advise how to fix this problem?

Shannon

Shannon Hochkins
  • 11,763
  • 15
  • 62
  • 95
  • When you say dynamically created.. do you mean by server or js? If the target elements are not yet in the dom when the for loop runs it wont obviously work. If you're dynamically adding text inputs in JS, use `$().on('focus','', function(e) { /* stuff here */ });` – sambomartin Apr 22 '13 at 00:08
  • whenever you add new elements with `placeholder` attribute,you need to run your code for those new elements. Provide sample code that adds new elements – charlietfl Apr 22 '13 at 00:09
  • do the same for blur, and set the control val up when it's created. `on` is equiv to `live` – sambomartin Apr 22 '13 at 00:10
  • also note that you aren't just running this code for IE...you are running it for all browsers. Use feature detection to run it only on browsers that don't support `placeholder`. There are numerous plugins already developed for doing this – charlietfl Apr 22 '13 at 00:11
  • This script is in it's on js file, wrapped in a html if statement, it's only included in IE, yes I'm including form elements with javascript, and I do NOT want to bind this function with an event like blur, or focus because I want the script run before the user is playing with any form fields. As I mentioned, it replaces the placeholder attribute, so I obviously don't want it to build it when a user clicks on the field. Thankyou! – Shannon Hochkins Apr 22 '13 at 00:16
  • define `live created elements` and provide some sample code – charlietfl Apr 22 '13 at 00:34
  • I think it kind of explains it self, but as an example, I've edit my post. – Shannon Hochkins Apr 22 '13 at 00:50
  • see this post on how to use `$.support` instead of IE conditional, then you have to apply your function to any newly added elements if not supported, as well as calling it on page load http://stackoverflow.com/questions/3937818/how-to-test-if-the-browser-supports-the-native-placeholder-attribute. Again, numerous plugins have been written for this... try one of those – charlietfl Apr 22 '13 at 01:01
  • I much prefer using conditionals, that also has nothing to do with this post, using the $.support will be embedded in the js file, it's also not read at all if it's not matched with IE conditionals, the whole file however would be read on every browser if I was to use the support function. – Shannon Hochkins Apr 22 '13 at 01:42

1 Answers1

0

Is this what you're looking for?

The on() function applies handlers to all elements that fit the selector on the page, not just that specific element (like .focus and .blur) More Info Here: http://api.jquery.com/on/

$(this).on("focus", function() {
            if ( this.value == val ) {
                this.value = "";
            }
        }).on("blur", (function() {
            if ( $.trim(this.value) === "" ) {
                this.value = val;
            }
        });
});
Shelby115
  • 2,816
  • 3
  • 36
  • 52