シンプルな暮らし。

数字用キーパッドの指定

PC画面の場合はさほど問題になりませんが、スマートフォンで入力値が数値の場合(郵便番号や電話番号など)には、数字入力用キーパッド(HTMLのinput type="number"input type="text"にpattern="[0-9]*"を指定してあげるとユーザービリティーが向上します。pattern属性は、正規表現で入力文字を制限する指定で、[0-9]*は数字に限定するという意味です。[0-9]*を指定すると自動的に英字キーボードの場合に数字用キーパッドが表示されます。input type="number"は、iOS4では問題なかったのですが、iOS5のSafariの仕様変更により連続した数字3桁を入力した場合に自動的にカンマが挿入されるのと、先頭に「0(ゼロ)」が入力できなくなったので避けたほうが無難です。

ただし、PC版のほとんどのブラウザではHTML5の「input type="number"」が正常に認識されませんので、javaScriptでスマートフォンと判定された特定のID属性を持つフォーム要素のtype属性をnumberに置換することで対処します。

大文字指定の解除

iPhoneに関しては、英文字のキーパッドが指定されている状態では、先頭文字を入力する際、自動的に大文字指定になってしまいます(Windowsで言うところのShiftボタンが押された状態)。

特にログインIDやパスワード入力時には「大文字/小文字の入力違い」によるログインエラーを誘発する可能性があるため、画面内に存在するすべてのinput type="text"もしくは"password"を持つフォーム要素にデフォルトの大文字指定を解除する「autocapitalize="off"」属性を付与します。

フォームの拡大表示への配慮

フォームのデザイン面では、スマートフォンでviewportの値がuser-scalable=yesになっているかuser-scalableが設定されていない場合に、フォーム要素をfocusするとそのフォーム要素が拡大表示されます。この結果、左右に配置されていた他のフォーム要素や入力項目のタイトルが見切れてしまいますので、何を入力して良いか分からなくなってしまうケースがあるかと思います。スマートフォンでは入力項目のタイトル等はフォームの上下に配置されていることが望ましくなります。一方で、PC版ではこのような配置は見難くなってしまいますので、CSSで切り替えてあげる対処が望ましくなります。せめてスマートフォンで入力例がフォームのすぐ下に配置されていればそれなにりユーザビリティーは確保されるかと。

入力フォームfocus(選択)時の配慮

focus時にどの入力ボックスにカーソルがあてられているのか分かりやすくするために、CSSの「:focus」擬似属性で背景色を変更してあげるとより良くなりそうです。

//画面内に存在するすべての入力ボックスに一律autocapitalize="off"を設定する。
//注：IEでは[hasAttribute]が動作しないため、ローカルでの動作確認にはご注意を。

function formTypeControl(){
 var obj = document.getElementsByTagName("input");
 var all = "";
 for(var i = 0; i < obj.length; i++){
  //オートキャピタライズ
  if(obj[i].hasAttribute("autocapitalize")){
  }else{
   var textValue = obj[i].getAttribute("type");
   if(textValue == "text" || textValue == "password" ){
    obj[i].setAttribute("autocapitalize", "off");
    //alert("autocapitalizeをONに設定しました。");
   }else{
    //alert("autocapitalizeを設定しませんでした。");
   }
  }
  //数字入力
  var tmpNumberObj = obj[i].getAttribute("name");

  //alert(tmpNumberObj);

  if(
   tmpNumberObj == "formのname属性を記述する"||
   tmpNumberObj == "formのname属性を記述する"
  ){
   obj[i].setAttribute("type", "number");
  }

 }
}

window.onload = function(){
 formTypeControl();
}

ラジオボタン、チェックボックスの余白設定

Androidでは設定できませんが、iPhoneではラジオボタンとチェックボックスの大きさを指定することができます。ラジオボタンやチェックボックスと他の要素が至近距離に配置されていると、誤フリップ(クリック)を招く危険がありますので、大きさと余白を調整します。

ラジオボタンの場合、CSSのwidthやheightでも大きさを調整できますが、widthやheightを指定するとラジオボタンが四角く描画されてしまうので、チェックボックスとの見分けが付かなくなります。ラジオボタンはfont-sizeで指定した方が無難です。

input[type="checkbox"]{
 margin:1em;
 width:30px;
 height:30px;
}
input[type="radio"]{
 margin:1em;
 font-size:30px;
 width:auto;
}