2011年08月24日

IE では onInput はきかない

またまた、IE ネタ。

jQuery で
$('.input').live('input', inputHandler);
というコードを書いていたんですが、これが IE で動かない。。。
input イベント、JavaScript の onInput は IE9 から対応していますが、それ以前の IE では未対応とのこと。

対策としては、
  1. onInput ではなく、onKeyDown もしくは onKeyUp を使用
  2. 値の変更の有無は別途 JavaScript で判別
を行う必要があります。例えば、
var preText = "";

$('.input').live('input', inputHandler);

function inputHandler(event) 
{
   var curText = $element.val();
   if (null == curText || curText == preText) {
      return;
   }
   preText = curText;

   
}
な感じでしょうか。 続きを読む
タグ:javascript jquery
posted by おちエン at 00:32| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

border-image 未対応の IE のための対策

昨日に引き続き IE ネタ。

CSS の border-image、かなり便利で多用していたんですが、IE では対応されていませんでした。
.hoge {
    -webkit-border-image: url(/images/hoge.png) 0 5 0 5 stretch stretch;
    -moz-border-image: url(/images/hoge.png) 0 5 0 5 stretch stretch;
}
とやっておけば、Chrome, Safari, FireFox では画像をうまいこと引き延ばして表示してくれます。

が、IE では対応していないため、何らかの対策をせざるをえません。
良い方法が見つからないため、現在は以下のように対応しています。
  1. PHP で IE かどうか判別
  2. IE の場合は、追加で CSS 読み込み
IE の独自拡張の良く分からない CSS を使って、
.hoge {
   filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
startColorStr=#000,endColorStr=#fff);
}
のようにグラデーションをかけたものを背景色に使うようにしています。
タグ:CSS
posted by おちエン at 00:09| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

2011年08月22日

IE で jQuery が動かない

最近、Windows では Chrome, FireFox を使っていて、IE はほとんど使ってなかったのですが、
久しぶりに使ってみたら、jQuery で書いた JavaScript が全く動かないことが判明。

色々調べてみたところ、IE では ,(カンマ)に注意ということでした。。。
具体的には、
$.ajax({
    url: $form.attr('action'),
    type: 'POST',
    data: $form.serialize(),
    timeout: 10000,
    success: function(data, textStatus) {
    },
    error: function(data, textStatus) {
        if (textStatus == "timeout") {
            alert("接続できませんでした。");
        } else {
            var error = data.responseText.replace(/&lgt;br>/gi, '\n');
            alert(error);
        }
    },
});
というようなコードは IE では動きません。
理由は、error: function() { }, の最後の .(カンマ)。
IE では option 指定の最後に ,(カンマ)があるとエラーになってしまいます。

option 指定の最後にカンマがあっても
  • Windows FireFox
  • Windows Chrome
  • Windows Safari
  • Mac Chrome
  • Mac Safari
では問題にならないため、ついつい見逃してしまいます。
jQuery を使う場合、絶対に IE でも動作テストするようにしましょう。
タグ:jquery
posted by おちエン at 21:28| Comment(0) | 開発 | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。