0

getAttributejavascriptのメソッドに問題がありますが、他のブラウザーではすべて正常に動作します。

何故ですか？

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>
4

2 に答える 2

1

Internet Explorer* はplaceholder入力のプロパティをサポートしていないため、javascript でその属性を取得できません。

* IE10 ならできると思います

于 2013-03-06T18:29:38.407 に答える