# Field 输入框
### 介绍
用户可以在文本框内输入或编辑文字。
### 引入
在`app.json`或`index.json`中引入组件,详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)。
```json
"usingComponents": {
"van-field": "@vant/weapp/field/index"
}
```
## 代码演示
### 基础用法
```html
<van-cell-group>
<van-field
value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
bind:change="onChange"
/>
</van-cell-group>
```
```js
Page({
data: {
value: '',
},
onChange(event) {
// event.detail 为当前输入的值
console.log(event.detail);
},
});
```
### 双向绑定
最低基础库版本在 2.9.3 以上时,可以使用[简易双向绑定](https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html)。
```html
<van-cell-group>
<van-field
model:value="{{ value }}"
placeholder="请输入用户名"
border="{{ false }}"
/>
</van-cell-group>
```
```js
Page({
data: {
value: '',
},
});
```
### 自定义类型
根据`type`属性定义不同类型的输入框。
```html
<van-cell-group>
<van-field
value="{{ username }}"
required
clearable
label="用户名"
icon="question-o"
placeholder="请输入用户名"
bind:click-icon="onClickIcon"
/>
<van-field
value="{{ password }}"
type="password"
label="密码"
placeholder="请输入密码"
required
border="{{ false }}"
/>
</van-cell-group>
```
### 禁用输入框
```html
<van-cell-group>
<van-field
value="输入框已禁用"
label="用户名"
left-icon="contact"
disabled
border="{{ false }}"
/>
</van-cell-group>
```
### 错误提示
通过`error`或者`error-message`属性增加对应的错误提示。
```html
<van-cell-group>
<van-field
value="{{ username }}"
label="用户名"
placeholder="请输入用户名"
error
/>
<van-field
value="{{ phone }}"
label="手机号"
placeholder="请输入手机号"
error-message="手机号格式错误"
border="{{ false }}"
/>
</van-cell-group>
```
### 内容对齐方式
可以通过`input-align`属性设置内容的对齐方式。
```html
<van-cell-group>
<van-field
value="{{ username3 }}"
label="用户名"
placeholder="请输入用户名"
input-align="right"
/>
</van-cell-group>
```
### 高度自适应
对于 textarea,可以通过`autosize`属性设置高度自适应。
```html
<van-cell-group>
<van-field
value="{{ message }}"
label="留言"
type="textarea"
placeholder="请输入留言"
autosize
border="{{ false }}"
/>
</van-cell-group>
```
### 插入按钮
通过 button slot 可以在输入框尾部插入按钮。
```html
<van-cell-group>
<van-field
value="{{ sms }}"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
border="{{ false }}"
use-button-slot
>
<van-button slot="button" size="small" type="primary">
发送验证码
</van-button>
</van-field>
</van-cell-group>
```
## 常见问题
### 真机上为什么会出现聚焦时 placeholder 加粗、闪烁的现象?
由于微信小程序的 input 组件和 textarea 组件是原生组件,聚焦时会将原生的输入框覆盖在对应位置上,导致了这个现象的产生。
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=placeholder%20%E9%97%AA%E7%83%81%20%E5%8A%A0%E7%B2%97)。
### 真机上 placeholder 为什么会盖过 popup 等其它组件?
由于微信小程序的 input 组件和 textarea 组件是原生组件,遵循原生组件的限制,详情可以查看[原生组件说明](https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html)。
### textarea 的 placeholder 在真机上为什么会偏移?
微信小程序的 textarea 组件在 Android 和 iOS 中默认样式不同,在 iOS 中会有默认的 `padding`,且无法置 0。
同时 `placeholder-style` 对 `vertical-align`、`line-height` 等大量 css 属性都不生效。
这一系列的问题导致了 placeholder 在真机上可能会出现偏移。
微信已经在 `2.10.0` 基础库版本后支持移除默认的 `padding`,但低版本仍有问题。详情可以查看 [微信开放社区](https://developers.weixin.qq.com/community/develop/issue/96)。
### 手写输入法为什么会丢失部分字符 / 手写输入法为什么不会触发 input 事件?
这是微信小程序的 input 组件本身的问题,如果需要兼容手写输入法的场景,可以在 `blur` 事件中取到输入的值。
相关的讨论可以查看[微信开放社区](https://developers.weixin.qq.com/community/search?query=input%20%E6%89%8B%E5%86%99%E8%BE%93%E5%85%A5&page=1&block=1&random=1567079239098)。
## API
### Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| name | 在表单内提交时的标识符 | _string_ | - |
| label | 输入框左侧文本 | _string_ | - |
| size | 单元格大小,可选值为 `large` | _string_ | - |
| value | 当前输入的值 | _string \| number_ | - |
| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` |
| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域,需要显示指定属性 fixed 为 true | _boolean_ | `false` |
| focus | 获取焦点 | _boolean_ | `false` |
| border | 是否显示内边框 | _boolean_ | `true` |
| disabled | 是否禁用输入框 | _boolean_ | `false` |
| readonly | 是否只读 | _boolean_ | `false` |
| clearable | 是否启用清除控件 | _boolean_ | `false` |
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
| required | 是否显示表单必填星号 | _boolean_ | `false` |
| center | 是否使内容垂直居中 | _boolean_ | `false` |
| password | 是否是密码类型 | _boolean_ | `false` |
| title-width | 标题宽度 | _string_ | `6.2em` |
| maxlength | 最大输入长度,设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
| placeholder | 输入框为空时占位符 | _string_ | - |
| placeholder-style | 指定 placeholder 的样式 | _string_ | - |
| custom-style | 自定义样式 | _string_ | - |
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
| arrow-direction | 箭头方向,可选值为 `left` `up` `down` | _string_ | - |
| show-word-limit | 是否显示字数统计,需要设置`maxlength`属性 | _boolean_ | `false` |
| error | 是否将输入内容标红 | _boolean_ | `false` |
| error-message | 底部错误提示文案,为空时不展示 | _string_ | `''` |
| error-message-align | 底部错误提示文案对齐方式,可选值为 `center` `right` | _string_ | `''` |
| input-align | 输入框内容对齐方式,可选值为 `center` `right` | _string_ | `left` |
| autosize | 是否自适应内容高度,只对 textarea 有效,<br>可传入对象,如 { maxHeight: 100, minHeight: 50 },<br>单位为`px` | _boolean \| object_ | `false` |
| left-icon | 左侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | _string_ | - |
| right-icon | 右侧图标名称或图片链接,可选值见 [Icon 组件](#/icon) | _string_ | - |
| confirm-type | 设置键盘右下角按钮的文字,仅在 type='text' 时生效 | _string_ | `done` |
| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起,在 type='textarea' 时无效 | _boolean_ | `false` |
| hold-keyboard | focus 时,点击页面的时候不收起键盘 | _boolean_ | `false` |
| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` |
| adjust-position | 键盘弹起时,是否自动上推页面 | _boolean_ | `true` |
| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏,只对 textarea 有效 | _boolean_ | `true` |
| selection-start | 光标起始位置,自动聚集时有效,需�
没有合适的资源?快使用搜索试试~ 我知道了~
vant-weapp-dev.zip
共1889个文件
ts:399个
wxml:341个
json:332个
0 下载量 75 浏览量
2023-03-21
09:18:02
上传
评论
收藏 1.31MB ZIP 举报
温馨提示
轻量、可靠的小程序 UI 组件库
资源推荐
资源详情
资源评论
收起资源包目录
vant-weapp-dev.zip (1889个子文件)
commit-msg 83B
.editorconfig 233B
.eslintignore 35B
.eslintrc 214B
.gitignore 199B
.gitignore 2B
index.js 13KB
index.js 12KB
index.js 11KB
index.js 11KB
index.js 10KB
index.js 10KB
index.js 9KB
index.js 8KB
index.js 8KB
index.js 8KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 7KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
index.js 6KB
compiler.js 6KB
index.js 5KB
index.js 5KB
index.js 5KB
transition.js 5KB
index.js 5KB
config.js 5KB
index.js 4KB
index.js 4KB
transition.js 4KB
index.js 4KB
index.js 4KB
utils.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 4KB
index.js 3KB
index.js 3KB
index.js 3KB
utils.js 3KB
utils.js 3KB
utils.js 3KB
index.js 3KB
index.js 3KB
dialog.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
toast.js 3KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
dialog.js 2KB
utils.js 2KB
index.js 2KB
relation.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
notify.js 2KB
toast.js 2KB
index.js 2KB
index.js 2KB
utils.js 2KB
utils.js 2KB
version.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
page-scroll.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
relation.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
notify.js 2KB
index.js 2KB
utils.js 2KB
index.js 2KB
共 1889 条
- 1
- 2
- 3
- 4
- 5
- 6
- 19
资源评论
m0_72731342
- 粉丝: 2
- 资源: 1832
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功