Rails 一日一つメソッド (Day36) text_field

 

Rails 一日一つメソッド (Day36) text_field

 

1. text_fieldとは

 - railsで formにtext入力fieldを生成するために使われるViewヘルパで、UserはDataを入力できる HTML <input type="text">タグを簡単に生成できる。

 

2. text_filed使い方

text_field(object_name, method, options = {})

 

 object_name

  -  formと繋がっているModelの名前。

 method

  - Model内で値をCRUDする属性の名前。

 options

  - HTML属性たイベントを追加するためのハッシュで、入力fieldや行動のスタイルを調整できる。

 

3. HTML属性

HTML属性	説明
:size	formの幅
:maxlength	入力fieldに入力可能な最大文字数
:accept	form受付可能なMIMEタイプ
:readonly	formの内容変更禁止
:disabled	無効化
:tabindex	Tabキーによる入力欄の移動順
:accesskey	formに移動するショートカットキー
:id	要素固有の識別子
:class	要素を分数するクラス名
:title	要素の補足情報
:style	要素の補足情報
:dir	表記法方向
:lang	基本言語

 

 1) :size

  - 入力fieldの横サイズを文字単位で設定。

<%= text_field :user, :username, size: "20" %>

 

 2) :maxlength

  - 最大文字数を制限する。

<%= form_field :user, :email, maxlangth: "50" %>

 

 3) :accept

  - <input type="file"> だけに使われる。

  - file MINEタイプを指定する。

<%= form_field :user, :profile_img, accept: "image/png,image/jpeg" %>

 

 4)readonly

  - 読み込み専用に作られ、Userが入力された値を変更できないようにする。

<%= text_field :user, :nickname, :disabled: true %>

 

 5) disabled

  - 属性は入力fieldを非活性化し、form提出時、Dataがサーバに送信できないようにする。

<%= text_field :user, :email, disabled: true %>

 

 6) tabindex

  - Tabキーを使って form Fieldの間を移動する時の順番を設定する。

<%= text_field :user, :email, tabindex: "1" %>

 

 7) accesskey

  - 特定のキーを押すとき該当のFieldに移動できる。

<%= text_field :user, :password, accesskey: "p" %>

 

 

 

4. イベント属性

イベント属性	説明
:onclick	Clickされた時
:ondblclick	DoubleClickされた時
:onmousedown	マウスのボタンが押し下げられた時
:onmouseup	マウスのボタンが離された時
:onmouseover	Consoleが重なった時
:onmousemove	Consoleが移動した時
:onmouseout	Consoleが離れた時
:onkeypress	キーが押されて離された時
:onkeydown	キーが押し下げられた時
:onkeyup	キーが離れた時
:onfocus	フォーカスされた時
:onblur	フォーカスを失った時

 

1) :onclick

<%= text_field :user, :username, :onclick: "alert('clickされました！！')" %>

 

2) :ondblclick

<%= text_field :user, :username, ondbclick: "alert('double clickされました！')" %>

 

 3) :onmousedown

<%= form_field :user, :name, :onmousedown: "alert('マウスのボタンがclickされました！')" %>

 

 

---

https://railsdoc.com/page/text_field

text_field | Railsドキュメント