十七.输入框 input

亦凉 2023-07-09 02:21 5阅读 0赞

# input #

> 输入框。该组件是原生组件。

## 一.所有属性 ##

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>String</td> 
   <td></td> 
   <td>是</td> 
   <td>输入框的初始内容</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>string</td> 
   <td>text</td> 
   <td>否</td> 
   <td>input的类型</td> 
  </tr> 
  <tr> 
   <td>password</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否是密码类型</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>string</td> 
   <td></td> 
   <td>是</td> 
   <td>输入框为空时占位符</td> 
  </tr> 
  <tr> 
   <td>placeholder-style</td> 
   <td>string</td> 
   <td></td> 
   <td>是</td> 
   <td>指定placeholder的样式</td> 
  </tr> 
  <tr> 
   <td>placeholder-class</td> 
   <td>string</td> 
   <td>input-placeholder</td> 
   <td>否</td> 
   <td>指定placeholder的样式类</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>maxlength</td> 
   <td>number</td> 
   <td>140</td> 
   <td>否</td> 
   <td>最大输入长度, 设置为-1的时候不限制最大长度</td> 
  </tr> 
  <tr> 
   <td>cursou-spacjing</td> 
   <td>number</td> 
   <td>0</td> 
   <td>否</td> 
   <td>指定光标与键盘的距离, 取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离</td> 
  </tr> 
  <tr> 
   <td>auto-focus</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>(即将废弃, 请直接使用focus)自动聚焦, 拉起键盘</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>获取焦点</td> 
  </tr> 
  <tr> 
   <td>confirm-type</td> 
   <td>string</td> 
   <td>done</td> 
   <td>否</td> 
   <td>设置键盘右下角按钮的文字, 仅在type="text"时生效</td> 
  </tr> 
  <tr> 
   <td>confirm-hold</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>点击键盘右下角按钮时是否保持键盘不收起</td> 
  </tr> 
  <tr> 
   <td>cursor</td> 
   <td>number</td> 
   <td></td> 
   <td>是</td> 
   <td>指定focus时的光标位置</td> 
  </tr> 
  <tr> 
   <td>selection-start</td> 
   <td>number</td> 
   <td>-1</td> 
   <td>否</td> 
   <td>光标起始位置,自动聚焦时有效, 需于selection-end搭配使用</td> 
  </tr> 
  <tr> 
   <td>selection-end</td> 
   <td>number</td> 
   <td>-1</td> 
   <td>否</td> 
   <td>光标结束位置, 自动聚焦是有效, 需于selection-start搭配使用</td> 
  </tr> 
  <tr> 
   <td>adjust-position</td> 
   <td>boolean</td> 
   <td>true</td> 
   <td>否</td> 
   <td>键盘弹起时, 是否自动上推页面</td> 
  </tr> 
  <tr> 
   <td>hold-keyboard</td> 
   <td>boolean</td> 
   <td>false</td> 
   <td>否</td> 
   <td>focus时,点击页面的时候不收起键盘</td> 
  </tr> 
  <tr> 
   <td>bindinput</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>是</td> 
   <td>键盘输入时触发,event.detail=(value,cursor,keyCode),keyCode为键值</td> 
  </tr> 
  <tr> 
   <td>bindfoces</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>是</td> 
   <td>输入框失去焦点时触发,event.detail={value:value}</td> 
  </tr> 
  <tr> 
   <td>binconfirm</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>是</td> 
   <td>点击完成按钮时触发,event.detail={value:value}</td> 
  </tr> 
  <tr> 
   <td>bindkeyboardheightchange</td> 
   <td>eventhandle</td> 
   <td></td> 
   <td>是</td> 
   <td>键盘高度发生变化的时候触发此事件</td> 
  </tr> 
 </tbody> 
</table>

## type的合法值 ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>文字输入键盘</td> 
  </tr> 
  <tr> 
   <td>number</td> 
   <td>数字输入键盘</td> 
  </tr> 
  <tr> 
   <td>idcard</td> 
   <td>身份证输入键盘</td> 
  </tr> 
  <tr> 
   <td>digit</td> 
   <td>带小数点的数字键盘</td> 
  </tr> 
 </tbody> 
</table>

## confirm-type的合法值 ##

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>send</td> 
   <td>右下角按钮为"发送"</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>搜索</td> 
  </tr> 
  <tr> 
   <td>next</td> 
   <td>下一个</td> 
  </tr> 
  <tr> 
   <td>go</td> 
   <td>前往</td> 
  </tr> 
  <tr> 
   <td>done</td> 
   <td>完成</td> 
  </tr> 
 </tbody> 
</table>