Angular 2+ Reference > OnsInput

OnsInput Directive (ons-input)

<ons-input>要素のAngularディレクティブです。

実例

Input

基本的な使い方 ons-input要素を使うとすることができます。value双方向バインディングを使うことができます。

@Component({
  selector: 'app',
  template: `
  <ons-page>
    <div class="content">
      <div><ons-input placeholder="Type here" [(value)]="target"></ons-input></div>

      <p>Text: {{target}}</p>
    </div>
  </ons-page>
  `
})
export class AppComponent{
  target: string = '';
}

入力した瞬間に反映させる

ons-inputのvalueバインディングでは、フォーカスが外れたタイミング(changeイベントが発生したタイミング)で値の変更が反映されます。入力した瞬間に双方向バインディングに値を反映させるには、次のように(input)イベントバインディングを使って値を代入して下さい。

<ons-input [(value)]="target" (input)="target = $event.target.value"></ons-input>

関連情報

属性

[編集]
名前 型 / デフォルト値 概要
placeholder String Placeholder text. In Material Design, this placeholder will be a floating label. （翻訳中） Optional.
float この属性が設定された時、ラベルはアニメーションするようになります。 Optional.
type String

Specify the input type. This is the same as the “type” attribute for normal inputs. It expects strict text types such as text, password, etc. For checkbox, radio button, select or range, please have a look at the corresponding elements. Please take a look at MDN for an exhaustive list of possible values. Depending on the platform and browser version some of these might not work.

（翻訳中） Optional.
input-id String Specify the “id” attribute of the inner <input> element. This is useful when using <label for="..."> elements. （翻訳中） Optional.

プロパティ概要

[編集]
名前 概要
float この属性が設定された時、ラベルはアニメーションするようになります。
value The current value of the input. （翻訳中）
disabled 無効化されている場合にtrue。

プリセットのmodifier

[編集]
Name 概要
material Displays a Material Design input. （翻訳中）
underbar Displays a horizontal line underneath a text input. （翻訳中）
transparent Displays a transparent input. Works for Material Design. （翻訳中）

メソッド

[編集]
シグネチャ 概要
focus() Focuses the input. （翻訳中）
blur() Removes focus from the input. （翻訳中）
focus()

Focuses the input. （翻訳中）

blur()

Removes focus from the input. （翻訳中）

Inputs

名前 型 概要
value 内部のinput要素に対する入力値を設定します。

Outputs

名前 型 概要
valueChange 内部のinput要素の値が変更された時に発火します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。