The weex builtin component input
is used to create input controls to receive the user's input characters. How a input
component works varies considerably depending on the value of its type
attribute, such as text
, password
, url
, email
, tel
etc.
Notes: does not support the common-event click
. Please listen to the input
or change
event instead.
This component supports no child components.
type
: the type of controls to display. The default value is text
, if this attribute is not specified. Possible values are text
, password
, tel
, email
, url
etc. each of which has the same meaning with W3C standard.
value
: the value(text) of the control.
placeholder
: a hint to the user of which can be entered to the control. The placeholder text must have no carriage returns or line-feeds.
disabled
: a boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls.
autofocus
: a boolean attribute lets you specify that a form control should have input focus when the page loads.
maxlength
: v0.7+ a number value to specify maxlength of input.
Other attributes please check out the common attributes.
placeholder-color: the color of placeholder. Default value is ‘#999999’.
text styles: checkout text styles
check out common styles for components
check out common events
does not support the common-event ‘click’. Please listen to the ‘input’ or ‘change’ event instead.
<template> <div> <input type="text" placeholder="Input Something" class="input" autofocus="true" value="" onchange="onchange" oninput="oninput" /> <text>oninput: {{txtInput}}</text> <text>onchange: {{txtChange}}</text> </div> </template> <style> .input { font-size: 60; height: 80; width: 400; } </style> <script> require('weex-components'); module.exports = { data: { txtInput: '', txtChange: '' }, methods: { onchange: function(event) { this.txtChange = event.value; console.log('onchange', event.value); }, oninput: function(event) { this.txtInput = event.value; console.log('oninput', event.value); } } }; </script>
Use Weex Playground App to Scan the QR image and view the example for ‘input’.