お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
投稿日:
Node.jsミドルウェア::HTTPD::nginxOS::iOS

Proxy headerを設定しないとiOS Safari環境で上手くアクセスできないケースがあるのでやる設定

確認環境

Env Ver
nginx 1.19.8

サンプルコード

httpセクション

    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

リバースプロキシ設定

location @prox {
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_pass  https://example.com;
}

maxlength

  • iOS Safariでは効かない
  • onInput()string.slice(0, maxlength)するとIMEの挙動が可笑しくなる
    • type="tel"など日本語が入力できない場合であれば有効
  • オートコンプリートやコピペ入力での字切れなどもあるため、根本的に使わないことが望ましい

type="number"

  • iOS Safariでは期待した動作にはならない
    • IMEが有効になり、全角入力が発生する
  • 使うならtype="tel"を使い、JSで数字以外の入力を弾くのが無難
  • 恐らく普及ブラウザの全てで半角入力を強制出来、スマホなどではNumPadが出てくる
    • アルファベットやハイフンなどの記号も打てるので必要に応じた入力制御が必要