javascript中的getAttribute在IE8中给出错误

Question

我在javascript中遇到getAttribute方法的问题，但在其他浏览器中，一切都运行良好。

为什么？

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>

Answer 1

Internet Explorer *不支持输入的placeholder属性，因此您无法在javascript中获取该属性。

* IE10确实，我相信

Answer 2

正如@Pointy指出对原始问题的评论，如果你还在使用jQuery ，那么使用 attr 而不是 getAttribute

如果您依赖以下内容，这可能会让您感到头疼：

IE8

LOG: typeof someHTMLelement.getAttribute 
LOG: object

普通浏览器

typeof someHTMLelement.getAttribute
function