22
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

uGUIのInputField

Posted at

#概要
Unityのバージョンは5.2.3f1

uGUIのInputFieldについてのメモです。
InputFieldのコンポーネントの内容は以下の通りです。

  • InputField
  • Placeholder(Text)
  • Text Textについての説明はこちら

内容はマニュアルを見ると詳しく載っています。
http://docs.unity3d.com/ja/current/Manual/script-InputField.html

#InputFieldの機能
文字の入力とキーボードの制限が可能。

  • Text Component 入力された文字が表示されるテキスト
  • Text テキストの初期文字列
  • Character Limit 入力文字数の制限(0を設定すると文字数制限はなし)
  • Content Type 文字種類の制限(用途によって使い分ける)
  • Standard 標準設定
  • Autocorrected 自動修正機能設定
  • Integer Number 整数入力
  • Decimal Number 数値入力
  • Alphanumeric 英数字入力
  • Name 名前入力(記号は入力不可)
  • Email Address メールアドレス入力
  • Password パスワード入力
  • Pin 暗証番号入力
  • Custom 入力をカスタマイズできる
  • Line Type 行のタイプ
  • Single Line 文字が幅いっぱいになっても折り返さなでリターンを押すと入力終了
  • Multi Line Submit 文字が幅いっぱいになると折り返しリターンを押すと入力終了
  • Multi Line Newline 文字が幅いっぱいになると折り返しリターンで改行 
  • Placeholder 何も文字が入力されてない時に表示する文字
  • Caret Blink Rate カーソルの点滅速度設定
  • Selection Color 選択されている文字列の背景色設定
  • Hide Mobile Input スマホのキーボード入力で補助用の入力フィールドの表示設定

注意)
行頭禁則の処理は入っていない。
日本語を入力する時の文字制限は文字を確定した時に制限される。
SNS機能を作る時に、不適切な単語などは入力を制限する場合、自分で処理を組む必要がある。

#InputFieldのイベント
イベントはOn Value Change(String)とEnd Edit(String)で制御します。
On Value Changeは文字が変更されたときにイベントが発生します。(日本語入力の場合、文字が確定した時にイベントが発生する)
End Editは入力が確定(エンターキーもしくは他の場所をクリック)されたときにイベントが発生します。
イベントの追加方法は
1.右下の+をクリック
2.None(Object)に制御するオブジェクトを選択
3.No Functionで制御するメソッドもしくは変数を指定する

#InputFieldのSprict制御

InputFieldTest
  using UnityEngine.UI;

  private InputField inputField1;
  private Text text1;

  void Start()
  {
      inputField1 = GetComponent<InputField>();
  }

  // このメソッドをOn Value Changeに指定すると文字変更があった時に呼び出される
  public void OnValueChange()
  {
      Debug.Log(inputField1.text);  // 入力された文字を表示
  }

  // このメソッドをEnd Editに指定すると入力が確定した時に呼び出される
  public void EndEdit()
  {
      if (inputField1.text = "a") inputField1.text = "";  // 入力文字制限
      Debug.Log(inputField1.text);  // 入力された文字を表示
  }

#その他のメモ

  • 文字入力制限をする場合は、Placeholderであらかじめ入力できる文字と文字数を書いておくといい
  • 入力禁止の単語が含まれていたり入力できない文字を登録しようとした場合はエラーメッセージを出すとなぜ入力できないか分かり易い
  • 少し改良して右側に×ボタンをを追加して押したら文字を消去できるようにする
  • 検索の入力バーとして利用する(虫眼鏡アイコンと更新ボタンを追加するとわかりやすい)
  • チャットの文字入力に利用できる
    http://hiyotama.hatenablog.com/entry/2015/05/22/173402
  • スマホだと文字入力は面倒なので極力数を減らすほうが良い。(お問い合わせフォームくらいにとどめる)

#参考になりそうなサイトやAsset
スマホのUIに使えそうな参考サイト
http://d.hatena.ne.jp/web-mind/20141028/p1

インプットフィールドの表現の参考サイト
http://ascii.jp/elem/000/001/062/1062572/index-2.html
http://netpr.jp/media/14943/

アニメーション表現の参考サイト
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fancyinput.html
http://9-bb.com/入力フォームにフォーカスすると鉛筆でカキカキ/
http://tympanus.net/Development/TextInputEffects/

#今後の課題
入力単語規制のいい処理方法を思いついたら後で追加する

22
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?