input

Weex 内置的 <input> 组件用来创建接收用户输入字符的输入组件。 <input> 组件的工作方式因 type 属性的值而异,比如 textpasswordurlemailtel 等。

注意:

此组件不支持 click 事件。请监听 inputchange 来代替 click 事件。

子组件

不支持子组件。

特性

  • type {string}:控件的类型,默认值是 <text>type 值可以是 textdatedatetimeemailpasswordteltimeurlnumber 。每个 type 值都符合 W3C 标准。
  • value {string}:组件的默认内容。
  • placeholder {string}:提示用户可以输入什么。 提示文本不能有回车或换行。
  • disabled {boolean}:布尔类型的数据,表示是否支持输入。通常 click 事件在 disabled 控件上是失效的。
  • autofocus {boolean}:布尔类型的数据,表示是否在页面加载时控件自动获得输入焦点。
  • maxlength {nubmer}v0.7一个数值类型的值,表示输入的最大长度。
  • return-key-type {string}v0.11键盘返回键的类型,支持 defalut;go;next;search;send,done。
  • singleline {boolean}:控制内容是否只允许单行
  • max-length {number}:控制输入内容的最大长度
  • lines:控制输入内容的最大行数
  • max:控制当type属性为date时选择日期的最大时间,格式为yyyy-MM-dd
  • min:控制当type属性为date时选择日期的最小时间,格式为yyyy-MM-dd

样式

  • placeholder-color {color}:placeholder 字符颜色。默认值是 #999999
  • 伪类v0.9.5+: input 支持以下伪类:

    • active
    • focus
    • disabled
    • enabled
  • text styles

    • 支持 color
    • 支持 font-size
    • 支持 font-style
    • 支持 font-weight
    • 支持 text-align

    查看 文本样式

  • 通用样式:支持所有通用样式

    • 盒模型
    • flexbox 布局
    • position
    • opacity
    • background-color

    查看 组件通用样式

事件

  • input: 输入字符的值更改。

    事件中 event 对象属性:

    • value: 触发事件的组件;
    • timestamp: 事件发生时的时间戳,仅支持Android。
  • change: 当用户输入完成时触发。通常在 blur 事件之后。

    事件中 event 对象属性:

    • value: 触发事件的组件;

    • timestamp: 事件发生时的时间戳,仅支持Android。

  • focus: 组件获得输入焦点。

    事件中 event 对象属性:

    • timestamp: 事件发生时的时间戳,仅支持Android。
  • blur: 组件失去输入焦点。

    事件中 event 对象属性:

    • timestamp: 事件发生时的时间戳,仅支持Android。
  • return: 键盘点击返回键。

    事件中 event 对象属性:

    • returnKeyType: 事件发生时的返回键类型。
    • value: 触发事件的组件的文本;
  • 通用事件

    注意:
    不支持 click 事件。 请监听 inputchange 事件代替。

    支持以下通用事件:

    • longpress
    • appear
    • disappear

    查看 通用事件

Methods

  • focus()v0.9+

    focus() 方法用于将 input 组件聚焦。

  • blur()v0.9+

    blur() 方法用于从 input 组件中移除焦点并关闭软键盘(如果它具有焦点)。

  • setSelectionRange(selectionStart,selectionEnd)v0.11+设置文本选区
    • selectionStart {number}:设置文本选区的起始点
    • selectionEnd {number}:设置文本选区的起终点
  • getEditSelectionRange(callback[selectionStart,selectionEnd])v0.11+设置文本选区
    • selectionStart {number}:获取文本选区的起始点
    • selectionEnd {number}:获取文本选区的起终点

      约束

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

示例

  1. <template>
  2. <div>
  3. <div>
  4. <textstyle="font-size:40px">oninput: {{txtInput}}</text>
  5. <textstyle="font-size:40px">onchange: {{txtChange}}</text>
  6. <textstyle="font-size:40px">onreturntype: {{txtReturnType}}</text>
  7. <textstyle="font-size:40px">selection: {{txtSelection}}</text>
  8. </div>
  9. <scroller>
  10. <div>
  11. <divstyle="background-color:#286090">
  12. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = text</text>
  13. </div>
  14. <inputtype="text"placeholder="Input Text"class="input" :autofocus=truevalue="" @change="onchange" @input="oninput"/>
  15. </div>
  16. <div>
  17. <divstyle="background-color:#286090">
  18. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = password</text>
  19. </div>
  20. <inputtype="password"placeholder="Input Password"class="input" @change="onchange" @input="oninput"/>
  21. </div>
  22. <div>
  23. <divstyle="background-color:#286090">
  24. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = url</text>
  25. </div>
  26. <inputtype="url"placeholder="Input URL"class="input" @change="onchange" @input="oninput"/>
  27. </div>
  28. <div>
  29. <divstyle="background-color:#286090">
  30. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = email</text>
  31. </div>
  32. <inputtype="email"placeholder="Input Email"class="input" @change="onchange" @input="oninput"/>
  33. </div>
  34. <div>
  35. <divstyle="background-color:#286090">
  36. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = tel</text>
  37. </div>
  38. <inputtype="tel"placeholder="Input Tel"class="input" @change="onchange" @input="oninput"/>
  39. </div>
  40. <div>
  41. <divstyle="background-color:#286090">
  42. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = time</text>
  43. </div>
  44. <inputtype="time"placeholder="Input Time"class="input" @change="onchange" @input="oninput"/>
  45. </div>
  46. <div>
  47. <divstyle="background-color:#286090">
  48. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = number</text>
  49. </div>
  50. <inputtype="number"placeholder="Input number"class="input" @change="onchange" @input="oninput"/>
  51. </div>
  52. <div>
  53. <divstyle="background-color:#286090">
  54. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input type = date</text>
  55. </div>
  56. <inputtype="date"placeholder="Input Date"class="input" @change="onchange" @input="oninput"max="2017-12-12"min="2015-01-01"/>
  57. </div>
  58. <div>
  59. <divstyle="background-color:#286090">
  60. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = default</text>
  61. </div>
  62. <inputtype="text"placeholder="please input"return-key-type="default"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  63. </div>
  64. <div>
  65. <divstyle="background-color:#286090">
  66. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = go</text>
  67. </div>
  68. <inputtype="text"placeholder="please input"return-key-type="go"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  69. </div>
  70. <div>
  71. <divstyle="background-color:#286090">
  72. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = next</text>
  73. </div>
  74. <inputtype="text"placeholder="please input"return-key-type="next"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  75. </div>
  76. <div>
  77. <divstyle="background-color:#286090">
  78. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = search</text>
  79. </div>
  80. <inputtype="text"placeholder="please input"return-key-type="search"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  81. </div>
  82. <div>
  83. <divstyle="background-color:#286090">
  84. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = send</text>
  85. </div>
  86. <inputtype="text"placeholder="please input"return-key-type="send"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  87. </div>
  88. <div>
  89. <divstyle="background-color:#286090">
  90. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input return-key-type = done</text>
  91. </div>
  92. <inputtype="text"placeholder="please input"return-key-type="done"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  93. </div>
  94. <div>
  95. <divstyle="background-color:#286090">
  96. <textclass="title"style="height:80;padding:20;color:#FFFFFF">function focus() & blur()</text>
  97. </div>
  98. <divstyle="flex-direction: row;margin-bottom:16px;justify-content: space-between">
  99. <textclass="button"value="Focus"type="primary" @click="focus"></text>
  100. <textclass="button"value="Blur"type="primary" @click="blur"></text>
  101. </div>
  102. <inputtype="text"placeholder="Input1"class="input"value=""ref="input1"/>
  103. </div>
  104. <div>
  105. <divstyle="background-color:#286090">
  106. <textclass="title"style="height:80;padding:20;color:#FFFFFF">input selection</text>
  107. </div>
  108. <divstyle="flex-direction: row;margin-bottom:16px;justify-content: space-between">
  109. <textclass="button"value="setRange"type="primary" @click="setRange"></text>
  110. <textclass="button"value="getSelectionRange"type="primary" @click="getSelectionRange"></text>
  111. </div>
  112. <inputtype="text"ref="inputselection"placeholder="please input"value="123456789"class="input" @change="onchange" @return="onreturn" @input="oninput"/>
  113. </div>
  114. </scroller>
  115. </div>
  116. </template>
  117. <stylescoped>
  118. .input {
  119. font-size:60px;
  120. height:80px;
  121. width:750px;
  122. }
  123. .button {
  124. font-size:36;
  125. width:200;
  126. color:#41B883;
  127. text-align: center;
  128. padding-top:10;
  129. padding-bottom:10;
  130. border-width:2;
  131. border-style: solid;
  132. margin-right:20;
  133. border-color: rgb(162,217,192);
  134. background-color: rgba(162,217,192,0.2);
  135. }
  136. </style>
  137. <script>
  138. module.exports ={
  139. data:function(){
  140. return{
  141. txtInput:'',
  142. txtChange:'',
  143. txtReturnType:'',
  144. txtSelection:'',
  145. autofocus:false
  146. };
  147. },
  148. methods:{
  149. ready:function(){
  150. var self =this;
  151. setTimeout(function(){
  152. self.autofocus =true;
  153. },1000);
  154. },
  155. onchange:function(event){
  156. this.txtChange = event.value;
  157. console.log('onchange', event.value);
  158. },
  159. onreturn:function(event){
  160. this.txtReturnType = event.returnKeyType;
  161. console.log('onreturn', event.type);
  162. },
  163. oninput:function(event){
  164. this.txtInput = event.value;
  165. console.log('oninput', event.value);
  166. },
  167. focus:function(){
  168. this.$refs['input1'].focus();
  169. },
  170. blur:function(){
  171. this.$refs['input1'].blur();
  172. },
  173. setRange:function(){
  174. console.log(this.$refs["inputselection"]);
  175. this.$refs["inputselection"].setSelectionRange(2,6);
  176. },
  177. getSelectionRange:function(){
  178. console.log(this.$refs["inputselection"]);
  179. var self =this;
  180. this.$refs["inputselection"].getSelectionRange(function(e){
  181. self.txtSelection = e.selectionStart +'-'+ e.selectionEnd;
  182. });
  183. }
  184. }
  185. };
  186. </script>

体验一下