v-ons-input

実例

Text input

Text input elements are created using the VOnsInput component. It works almost exactly the same as a normal <input> tag.

This component implements a type attribute to choose the type of the input. Default is text but it also admits password, number, etc. The only exception are checkboxes and radio buttons, which have corresponding components, VOnsCheckbox and VOnsRadio.

An attribute input-id is provided to set the ID of the inner native element. This is useful for HTMLLabel elements: <label for="some-inner-input">.

For the text-like inputs, in Material Design the placeholder can be made to float using the float prop.

Using v-model

Every input is compatible with v-model directive. Checkboxes can be bound to arrays or booleans normally. The only exception are modifiers. There is, however, a workaround for lazy modifier:

<v-ons-input v-model="something" model-event="change"></v-ons-input>

This will use change event instead of input when updating v-model.

Prop一覧

名前	型 / デフォルト値	概要
float	Boolean	この属性が設定された時、ラベルはアニメーションするようになります。 Optional.
inputId	String	Specify the “id” attribute of the inner `<input>` element. This is useful when using `<label for="...">` elements. （翻訳中） Optional.
modelEvent	Boolean	The native event which should trigger the update:modelValue event. （翻訳中） Optional.
modelValue	Boolean	The value of the input. （翻訳中） Optional.
placeholder	String	Placeholder text. In Material Design, this placeholder will be a floating label. （翻訳中） 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.

プリセットの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. （翻訳中）

イベント

名前	概要
update:modelValue	Fired right after the event set in the modelEvent prop. （翻訳中）

update:modelValue

Fired right after the event set in the modelEvent prop. （翻訳中）

パラメーター

名前	型	概要

お困りですか?

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

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

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