もんりぃ is undefined.

育児ネタとか、技術ネタとか。

jQuery.animate() では background-position を扱えない。

っぽいので調べてみた。*1

動かないコード

HTML

<p id="hoge">
  <span>適当なテキスト</span>
</p>

CSS

#hoge {
  width: 100px;
  height: 20px;
  background-image: url('/path/to/image');
  background-position: 0 0;
  background-repeat: no-repeat;
}

#hoge span {
  text-indent: -9999px; /* text-indent の是非に関しては、このエントリの範疇外ってことでw */
}

JavaScript

$('#hoge').animate({backgroundPosition: '-100px 0'}, {duration: 500});

こう書いても、アニメーションはせずに、500ms 後に background-position が変わるだけ。

多分、ブラウザ毎の互換の絡みなのかなぁ?とかは思うけど、何れにしても動かなかった。

勿論、ハッシュのキーを 'background-position' にしてもダメだし、Firefox に限定すれば backgroundPositionX とかしてもダメだった。*2

で、どーしたかと言えば、img タグに切り替えて強引に対処。

動くコード

HTML

<p id="hoge">
  <img src="/path/to/image" />
</p>

CSS

#hoge {
  width: 100px;
  height: 20px;
  position: relative;
  overflow: hidden;
}

#hoge img {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

$('#hoge img').animate({left: '-100'}, {duration: 500});

これで、一応期待していたような動きに見える。

んー、微妙…orz

Internet Explorer 8 向けの CSS ハックが Firefox でも適応されちゃう…?

未検証というか、深追いしてないんだけど、巷で言われている IE8 向けの \9 ハックが Firefox でも効いちゃってる疑惑。

検証コードは以下。

其の壱

html>/**/body {
  font-family /*\**/: "MS Pゴシック", sans-serif\9;
}

其の弐

body {
  font-family /*\**/: "MS Pゴシック", sans-serif\9;
}

其の参

body {
  font-family: "MS Pゴシック", sans-serif\9;
}

………全部ダメ。

諦めて、以下のようにして逃げた。死にたい。

    <link rel="stylesheet" href="hoge.css" type="text/css" media="all" />
    <!--[if IE 8.0]>
    <link rel="stylesheet" href="hoge-ie8.css" type="text/css" media="all" />
    <![endif]-->

JavaScript の正規表現では \A や \z が使えない。

前置き

JavaScript でメールアドレスのバリデーションを行おうと思って、以下のような正規表現を書いてみた。*1

var value = $('#hoge input[name="email"]').val() || '';
if (value.match(/\A[a-zA-Z0-9_][a-zA-Z0-9.+_-]*@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,}\z/m)) {
  alert('Valid');
} else {
  alert('Invalid');
}

んで、いざ処理を通してみると、正しいハズのメールアドレスが通らない。

本題

そもそもの問題点としては、この日記のタイトルの通り。

「いや、それくらい常識でしょ。」って言われたらそれまでなんだけど、\A やら \z やらは ECMAScript な処理系では使えない。

なので、以下のように直してみる。

var value = $('#hoge input[name="email"]').val() || '';
if (value.match(/^[a-zA-Z0-9_][a-zA-Z0-9.+_-]*@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,}$/m)) {
  alert('Valid');
} else {
  alert('Invalid');
}

これで、一見問題無いように思える。

けど、以下のように入力文字列に改行が含まれる場合、本来望んでいない値も Valid として判定されてしまう。

monry@hoge.com
monry@fuga.com

原因は、パターンの最後に付けてる m 修飾子。これがあると、ダメ。

実は、この正規表現自体は、元々 PHP (preg) で記述した際に用いていたモノで、\A, \z を使うために m 修飾子を入れていて、それを外し忘れたってだけのお話。

結論

正解 *2 は以下の通り。

var value = $('#hoge input[name="email"]').val() || '';
if (value.match(/^[a-zA-Z0-9_][a-zA-Z0-9.+_-]*@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,}$/)) {
  alert('Valid');
} else {
  alert('Invalid');
}

一言

んー、この辺のルールは身体で覚えるしか無いのかしら…。

処理系によって解釈が変わるから、色々と混乱するですよ(´•ω•`)