前の会社での話。
実は、前の会社を辞めてからも９月は特別に週一回行っていまして、自分がある程度関わったプログラムのバグ修正なんかをしていました(ほとんど、自分が関わったところではないところに時間を使いましたが)。
そんな中、昨年退職した上司が作成したあるウェブページのテキストボックスが変な挙動をしていました。
そのテキストボックスには、数値が入っていて、右寄せになっていました。その時は特別深く考えたわけではないのですが、CSSのtext-alignでrightを指定しているんだろうなとは思いました。
それはいいのですが、どうも入力するとおかしなことになります。
IEだと右矢印キーを押すと左にカーソルが移動し、左矢印キーを押すと右にカーソルが移動します。よくわからないけど、IEのバグかなと思って試しにChromeで見てみると、なんとChromeでは一番右にカーソルをうつして入力すると左側に文字が追加され、逆に一番左にカーソルをうつして入力すると右側に文字が追加されます。
初めての減少に思わずポカンとしてしまったのですが、多分、keydownでイベントを発生させていて何かやらかしているのだろうと思い調べてみました。すると、予想通り、数値のみしか入力させない記述がしてありました(参考：HTMLのテキストボックスを、できるかぎり半角数値のキー入力のみにする | while(isプログラマ))。
というわけでいろいろ変更してみたのですが、全く変化がありません。そして、試しにkeydownのイベントを無くしてみましたが、全く変化がありませんでした。正直、わけが分かりませんでした。
とりあえず、一から考え直そうと思って開発者ツールで対象のテキストボックスを選択し、右側のサイドバーを見たところ、あると思ったものが無いことに気づきました。そう、『text-align:right』の記述がありませんでした。スクロールバーを上から下まで移動させて見てみたのですが、その記述がみあたりません。「右寄せになってるのになぜ？」もはやパニックに近い状態の自分でしたが、ふと見られない記述がありました。
『direction:rtl』
なんじゃこりゃ？ と思って調べてみると、文章の記述方向の設定をしている記述ということが分かりました(参考：direction – CSS | MDN)。rtl は右から左……。まさか……。
この記述を無くしたら、カーソルが想定通りに動きました(もちろん、これだと左寄せになってしまうので、『text-align:right』を追加しておきました)。
とりあえず、同じようなテキストボックスを下記においておきます。valueの値は12345としています。こうすれば、『54321』と表示されるような気がしなくもないんですが、『12345』と表示されています。
というわけで、もし、矢印キーを押したら逆方向にカーソルが移動する場合は、この記述がないか疑ってください。そんなこと、滅多にないと思いますが……。
なお、「テキストボックスに『direction:rtl』の指定があればカーソルの動きがおかしくなる。ということを言いたいだけだろうに、前置きが長すぎ！ そんなんだからブログ続かないんだろ！」なんてツッコミは受け付けておりません。むしろ、こう書いたことがセルフツッコミです。
コメント