getAttribute in javascript give error in IE8

Question

I'm having problem with the getAttribute method in javascript, but in other browser everything works well.

Why is that?

JS:

(function(window, $) {

  var textInput = document.getElementsByTagName('input'),
      placeholder = 'placeholder' in document.createElement('input'),
      placeholderText,
      max = textInput.length,
      i;

  if (!placeholder) {
    for (i = 0; i < max; i += 1) {

        if (textInput[i].type === 'text') {

            placeholderText = textInput[i].getAttribute('placeholder');
            console.log(textInput[i].getAttribute('placeholder'));

            textInput[i].setAttribute('value', placeholderText);        

            /**
            * Done especially because of IE...
            **/
            var addEvent = function (options) {
                if (options.tag.addEventListener) {
                    options.tag.addEventListener(options.event, options.fn, false);
                } else if (options.tag.attachEvent) {
                    options.tag.attachEvent('on' + options.event, options.fn);
                } else {
                    options.tag['on' + options.event] = options.fn;
                }
            };

            /**
            * On blur, refill text field with initial text
            **/
            var onBlur = function() {
                var thisPlaceholderText = this.getAttribute('placeholder');
                this.value = thisPlaceholderText;
            };

            /**
            * On keypress, remove the text field initial text
            **/
            var onKeypress = function() {
                var thisPlaceholderText = this.getAttribute('placeholder');

                if(this.value === thisPlaceholderText) {
                    this.value = '';
                }
            };

            // on blur
            addEvent({ 
                tag: textInput[i], 
                event: 'blur', 
                fn: onBlur 
            });

            // on keypress
            addEvent({ 
                tag: textInput[i], 
                event: 'keypress',
                fn: onKeypress 
            });
        }

        // on submit, don't take the value of text-field if it's the same as placeholder
        $('input[type="text"').parents('form').submit(function(e) {

            if (textInput[i].value === placeholderText) {
                textInput[i].value = '';
            } else {
                textInput[i].setAttribute('value', placeholderText);
            }
        });
    }
  }
}(window, jQuery));

HTML:

<form id="search-form">
<fieldset>

    <!-- from -->
    <ul id="from">
        <li>
            <label for="travel-from">Travelling from</label>
            <input id="travel-from" type="text" placeholder="e.g. London Paddington" />
        </li>
        <li>
            <div class="left-col">
                <label for="depart-date">Depart</label>
                <input id="depart-date" type="text" placeholder="dd/mm/yyyy" />
            </div>
            <div class="right-col">
                <ul>
                    <li>
                        <label for="from-hrs">Time</label>
                        <div id="from-hrs">
                            <select>
                                <option value="00" selected>00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                            </select>
                        </div>
                    </li>
                    <li>
                        <label for="from-mins">Minutes</label>
                        <div id="from-mins">
                            <select>
                                <option value="00" selected>00</option>
                                <option value="05">05</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                            </select>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>
    <!-- from -->

</fieldset>
</form>

Also, if you're using jQuery anyway, why do you need that "addEvent" function? — Pointy
– Pointy, Commented Mar 6, 2013 at 18:29

quandrum · Accepted Answer · 2013-03-06 18:29:38Z

1

Internet Explorer* does not support placeholder property on input's, so it you can't get that attribute in javascript.

*IE10 does, I believe

answered Mar 6, 2013 at 18:29

quandrum

1,6661 gold badge11 silver badges14 bronze badges

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

1 Comment

Rasmus Søborg Over a year ago

Another IE disadvantage? Surprise, but thank you for your answer.

Mars Robertson · Accepted Answer · 2013-05-29 11:16:40Z

0

As @Pointy pointed in a comment to the original question if you're using jQuery anyway it's way better to use attr rather than ~~getAttribute~~

This may save you some headaches if you ever rely on the following:

IE8

LOG: typeof someHTMLelement.getAttribute 
LOG: object

normal browsers

typeof someHTMLelement.getAttribute
function

answered May 29, 2013 at 11:16

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

Collectives™ on Stack Overflow

getAttribute in javascript give error in IE8

2 Answers 2

1 Comment

IE8

normal browsers

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

IE8

normal browsers

Comments

Your Answer

Sign up or log in

Post as a guest

Related