placeholderのjavascriptを使用していると、一部のページのみIE9で動作できませんでした。
F12の開発者ウィンドウを開きエラー情報を見てみるとSCRIPT16389というエラーが発生していました。
SCRIPT16389をMicrosoftで調べてみるとJavascriprランタイムエラーだそうです。
…よくわからない。
さらにエラー箇所がjquery.jsのみなのでどこが原因なのかもわからずじまいでした。
なので一部のページのみで動作する、しないページの違いを見てどこのスクリプトが問題なのか調査することにしました。
iframeが原因
調査していると、iframeを使用し、iframe内にてplaceholderのjavascriptを使用していると上記エラーが発生することがわかりました。
iframeにフォーカスが当たっていない状態でiframe内にてスクリプトを動かすと上記エラーが発生するみたいです。
改修
修正方法は単純にフォーカスをあてるだけです。
iframeで使用されるページのjavascriptにてフォーカスをあてるソース(document.documentElement.focus())を埋め込みます。
//placeholder対応
$(function() {
document.documentElement.focus(); //IE9(iframe使用時SCRIPT16389エラー)対策
var supportsInputAttribute = function(attr) {
var input = document.createElement('input');
return attr in input;
};
if (!supportsInputAttribute('placeholder')) {
$('[placeholder]').each(function() {
var
input = $(this),
placeholderText = input.attr('placeholder'),
placeholderColor = 'GrayText',
defaultColor = input.css('color');
input.
focus(function() {
if (input.val() === placeholderText) {
input.val('').css('color', defaultColor);
}
}).
blur(function() {
if (input.val() === '') {
input.val(placeholderText).css('color', placeholderColor);
} else if (input.val() === placeholderText) {
input.css('color', placeholderColor);
}
}).
blur().
parents('form').
submit(function() {
if (input.val() === placeholderText) {
input.val('');
}
});
});
}
});
IE8、IE10、IE11では上記エラーが表示されず、IE11のエミュレータにてIE9で実行してもエラーが発生しませんでした。(IE9のバグ?)
javascript色々作っているとクロスブラウザ問題が出てくるので大変です…。