< input > 组件

[Erwin11]

本文档已迁移至 https://weex-project.io/cn/references/components/input.html ，此处不再维护，谢谢。

< input > 组件

概述

input 标签用于创造一个从用户那边获取数据的交互动作。渲染一个特定的图片，并且它不能包含任何子组件。input组件的效果变化依赖于变量类型的属性设置，比如text,password,url,email,tel等。

注意: width和height需要指定，否则会不工作。

注释：input不支持普通的点击事件click.请使用监听input或change事件代替。

子组件

这个组件不支持子组件。

属性

• type:<字符串>属性,控制组件显示的类型。如果没有特定，默认值是text。可以设置的值有：text，password,tel,email,url等，和w3c标准一致。
• value:<字符串>属性，控制组件的值。
• disabled:<布尔值>属性，用于使得组件不可用。实际使用中，click事件在有disabled属性值在的情况下不会执行。
• autofocus:<布尔值>属性，让你可以设置当页面加载时，input是否自动获取焦点。

其他属性请查阅基本属性

样式

• placeholder-color : 占位符的颜色，默认是#999999。

文本样式： 请查阅文本样式

• 支持color样式。
• 支持font-size样式。
• 支持font-style样式。
• 支持font-weight样式。
• 支持text-align样式。

基础样式请查阅组件的基础样式

• 支持 flexbox 相关样式
• 支持 box 模型相关样式
• 支持 position 相关属性
• 支持 opacity,background-color 等。

事件

• input:该元素改变的值
• change:改变事件是当组件提交的值已经改变的时候用户中断结果。经常跟在事件之后。
• focus:组件获取焦点。
• blur:组件失去焦点。

基本事件：查阅基本事件

• 支持 appear / disappear 事件。查阅基本事件

注意：input不支持基础事件click.请用监听事件input或者change事件代替。

事件对象的参数

• 对于 input和change事件：
  • value:组件事件发出的值。
  • :事件的时间戳。
• 对于focus和blur事件：
  • :事件的时间戳。

例子

 

<div>
  <input
    type="url"
    autofocus="true"
    placeholder="..."
    value="http://alibaba.github.io/weex/"
    style="placeholder-color: #666666;">
  </input>
</div>

[clone123]

good ！

[jiuyuegui]

请问想实现清除input里的用户输入内容应该怎么做？我试了很多方式均未成功。。。

[carly1987]

那么多行文本 textarea如何实现呢？

[Jinjiang]

@carly1987 textarea 我们正在研发中

[psychokiller666]

什么时候支持type=file

[richardyuq]

一切输入组件源于input。搞清它绝对重要。

[hapiman]

文件上传可以用这种方式吗

[remili]

什么时候支持type=datetime，这个很重要啊，或者有什么其他的解决办法

[snoozybot]

@jiuyuegui 目前不支持 this.$el(id).value = '' 这种方式改写 input value。只支持在 input 事件中改写。

[snoozybot]

@carly1987
目前已经支持 textarea
参考最新文档 http://alibaba.github.io/weex/doc/components/textarea.html

[snoozybot]

@psychokiller666 @hapiman 目前暂不支持文件上传，你可以到 issues 发起讨论，如果有结论，开发者会考虑添加。

[snoozybot]

@remili 目前暂不支持datetime

[weartist]

@DoranYun 麻烦问下移动端本地自定义组件可以自定义input吗?

[snoozybot]

本文档已迁移至 https://weex-project.io/cn/references/components/input.html ，此处不再维护，谢谢。

[DinoDom]

<div class="inputdiv passworddiv"> <text class="icon2" >&#xe60e;</text> <input id="txtpassword" type={{inputtype}} placeholder="请输入密码" class="input" oninput="passwordinput" /> <text style="color: #666;font-size: 36;font-family: iconfont2; width:50;" onclick="eyeclicked">{{geteyecode}}</text> </div>
eyeclicked: function(e) { if (this.inputtype == "password") { this.inputtype = "text" this.eyecode = "&#xe612;" // this.$el('txtpassword').blur() // this.$el('txtpassword').focus() } else { this.inputtype = "password" this.eyecode = "&#xe614;" } }

以上代码在ios中可以正常运行(点击input右边的text的时候input的type会跟着变化)但是在安卓中无法生效

[chenxiaozhen0104]

请问楼上的问题解决了吗？