# 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 | 光标起始位置,自动聚集时有效,需�
没有合适的资源?快使用搜索试试~ 我知道了~
vantweapp源代码
共1850个文件
ts:391个
wxml:330个
json:327个
需积分: 46 4 下载量 19 浏览量
2022-01-25
18:01:53
上传
评论 1
收藏 1MB RAR 举报
温馨提示
vantweapp源代码
资源详情
资源评论
资源推荐
收起资源包目录
vantweapp源代码 (1850个子文件)
commit-msg 83B
.editorconfig 233B
.eslintignore 35B
.eslintrc 214B
.gitignore 171B
.gitignore 2B
index.js 12KB
index.js 12KB
index.js 11KB
index.js 10KB
index.js 10KB
index.js 9KB
index.js 9KB
index.js 8KB
index.js 8KB
index.js 7KB
index.js 7KB
index.js 7KB
vant.config.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 5KB
index.js 5KB
index.js 5KB
index.js 5KB
transition.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 3KB
index.js 3KB
index.js 3KB
utils.js 3KB
index.js 3KB
utils.js 3KB
utils.js 3KB
index.js 3KB
index.js 3KB
index.js 3KB
dialog.js 3KB
index.js 3KB
index.js 3KB
toast.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
utils.js 2KB
index.js 2KB
utils.js 2KB
dialog.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
toast.js 2KB
utils.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
notify.js 2KB
index.js 2KB
index.js 2KB
relation.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
version.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
index.js 2KB
utils.js 2KB
index.js 2KB
page-scroll.js 2KB
index.js 1KB
validator.js 1KB
共 1850 条
- 1
- 2
- 3
- 4
- 5
- 6
- 19
神奇的布欧
- 粉丝: 842
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
- 课设-内部排序算法比较 包括冒泡排序、直接插入排序、简单选择排序、快速排序、希尔排序、归并排序和堆排序.zip
- Python排序算法.zip
- C语言实现直接插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序、归并排序、计数排序,并带图详解.zip
- 常用工具集参考用于图像等数据处理
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0