テキストボックスの文字を右寄せにしているとiOSで入力しにくい

iOSでの文字入力

iOSでテキストボックスに文字を入力しますよね。

カーソルを移動する矢印がないですよね。

不便ですよね。

文字を右寄せにしているともっと不便です。

右端までなかなか移動できません。

どうして右寄せにしているのか

全部数字だったりすると桁を合わせて見やすくするためにも右寄せにしたりしますよね。

それが入力項目だから使いづらくなってるわけです。

iOSでも入力しやすくする方法

ひらめきました。

focusがあたっている時は左寄せにしてあげればいいのです。

デモとコード

動作画面

このように動作します。

input 1

テキストボックスに数字を右寄せで表示。

input 2

上のテキストボックスは特に何も設定をしていません。

文字を消すにはカーソルを右側に持って行かなければならないのですが手間がかかる。

input 3

下のテキストボックスはfocusがあたった時点で左寄せにしています。

このようになることで簡単に文字の右側にカーソルを持ってくることができます。

まとめ

何気ないことですが、こういったことの積み重ねがUXの向上につながっていくと考えています。

ずっとどうすれば編集しやすくなるか考えていたので、1つの案としてこれが出てきたことでほっとしています。

Author
菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
生きるのが難しい
Previous Post
会議のルールを考えている
Recent Posts
Electron と Scala.js と scalajs-react と ScalaCSS を使ってアプリを作った時のログ
Scala で Flyway と Slick を使って codegen した時のログ
自分とは連続した情報であると定義する
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想