IE8: returning value

[nyfelix]

I'm developping an App in IE8 with yui3.
With the onblur event of an input node I check if the value is empty or not to act on the input...
When I use plcaeholders instead of an empty value ('')' I will get the placeholder text. (Same code works fine with IE9 and latest Chorme)

node-input.on('blur', function(e) {
    if (e.target.get('value') != '') {
        // do someting
    } else {
        // do someting else
    }
}, this);

Is there a way to deal with that situation?
Probably it is not a convenient way to wirte the placeholder text directly into the input...

Thanks for Help!
Felix

[jamesallardice]

This is basically a duplicate of issue #14 (which concerns jQuery but the result is the same). The quick solution for you is to check for the placeholder text in your if statement:

var val = e.target.get('value');
if (val !== '' && val !== e.target.get('placeholder')) {
    // do something
}

I am considering writing various plugins for common DOM libraries (jQuery and YUI included) that will effectively monkeypatch the methods for returning input values and return the empty string when the placeholder is active. This is still just an idea though, so no promises or timeframes on that.

[jamesallardice]

@nyfelix I started working on this today. You may be able to help as I've run into a blocker pretty quickly. Let me know if you know of a solution: http://stackoverflow.com/questions/19281260/can-you-monkey-patch-methods-of-yui-modules

[nyfelix]

Hi James,
first of all thanks for your help: I'm currently using your workaround which is fine for me as long as no one is accidentally using the placeholder text as a valid value.
I looked at the SO topic above but need some time to dig into it myself (never had to do anything like this so far).
I let you know if I see a solution...

/Felix

[nyfelix]

Ok If I look at that example there seems to be a misunderstanding about Y. In YUI3 every thing is sandboxed, so you can have multiple instances of YUI running simultaneously. Y is not a global variable, it will be instantiated when you call the YUI().use method and only exists inside that function. That's why in the code of SO only DifferentY exists, but not Y.

YUI().use('node', 'event', function (Y) {
    // The Node and Event modules are loaded and ready to use.
    // Y exists in here...
});

So if you want to enhance YUI with the placeholder polyfill I would build on YUI's module strategy and
cerate a YUI module with YUI.add()

if (YUI) {
  YUI.add('placeholder-polyfill', function (Y) {
    Y.Node.prototype.get = function () {
      // Do some stuff then call the original function
    };
  }, '0.0.1', {
    requires: [Node]
  });
}

and let the user load the polyfill as a module (how he would do it anyway with yui3)

YUI({
    modules: {
        placeholder-polyfill: {
            fullpath: './placeholder.js'
        }
    }
}).use('placeholder-polyfill'), function(Y) {
    // just use YUI as allways
});

for an explanation of how the global YUI object works, this overview might help: http://yuilibrary.com/yui/docs/yui/
However, I did not have the time to prove my approach. Let me know, if I this helped and if I can provide further help!

/Felix

[jamesallardice]

@nyfelix Thanks for your help. I'd appreciate it if you could take a quick look at the code and let me know your thoughts (either here or in this pull request).

[nyfelix]

I just traveled home from a conf. I will look at it and do a test in my app
tomorrow!
Thanks, Felix

2013/10/11 James Allardice notifications@github.com

@nyfelix https://github.com/nyfelix Thanks for your help. I'd
appreciate it if you could take a quick look at the codehttps://github.com/jamesallardice/Placeholders.js/blob/adapters/lib/adapters/placeholders.yui3.jsand let me know your thoughts (either here or in this
pull request #40).

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/38#issuecomment-26133992
.