# input

输入框。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">input 输入框</view>
    <demo-cell title="可自动聚焦">
      <input class="bz-input" focus placeholder="自动获得焦点" />
    </demo-cell>
    <demo-cell title="键盘右下角按钮显示为搜索">
      <input class="bz-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
    </demo-cell>
    <demo-cell title="控制最大输入长度">
      <input class="bz-input" maxlength="10" placeholder="最大输入长度为10" />
    </demo-cell>
    <demo-cell :title="`实时获取输入值: ${inputValue}`">
      <input class="bz-input" @input="onKeyInput" placeholder="输入同步到view中" />
    </demo-cell>
    <demo-cell title="控制输入的input">
      <input class="bz-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
    </demo-cell>
    <demo-cell title="数字输入">
      <input class="bz-input" type="number" placeholder="这是一个数字输入框" />
    </demo-cell>
    <demo-cell title="密码输入">
      <input class="bz-input" password type="text" placeholder="这是一个密码输入框" />
    </demo-cell>
    <demo-cell title="带小数点">
      <input class="bz-input" type="digit" placeholder="带小数点的数字键盘" />
    </demo-cell>
    <demo-cell title="身份证输入">
      <input class="bz-input" type="idcard" placeholder="身份证输入键盘" />
    </demo-cell>
    <demo-cell title="控制占位符颜色">
      <input class="bz-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" />
    </demo-cell>
  </view>
</template>

<script>
	export default {
    data() {
        return {
            title: 'input',
            focus: false,
            inputValue: '',
            changeValue: ''
        }
    },
    methods: {
        onKeyInput(event) {
            this.inputValue = event.target.value
        },
        replaceInput(event) {
            var value = event.target.value;
            if (value === '11') {
                this.changeValue = '2';
            }
        }
    }
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

展开刷新关闭

# 属性说明

属性名	类型	默认值	说明
value	String		输入框的初始内容（v-model）
type	String	text	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
placeholder-style	String		指定 placeholder 的样式
placeholder-class	String	"input-placeholder"	指定 placeholder 的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
cursor-spacing	Number	0	指定光标与键盘的距离，单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离
focus	Boolean	false	获取焦点。
confirm-type	String	done	设置键盘右下角按钮的文字，仅在 type="text" 时生效。
confirm-hold	Boolean	false	点击键盘右下角按钮时是否保持键盘不收起
cursor	Number		指定focus时的光标位置
selection-start	Number	-1	光标起始位置，自动聚集时有效，需与selection-end搭配使用
selection-end	Number	-1	光标结束位置，自动聚集时有效，需与selection-start搭配使用
auto-blur	Boolean	false	键盘收起时，是否自动失去焦点
ignoreCompositionEvent	Boolean	true	是否忽略组件内对文本合成系统事件的处理。为 `false` 时将触发 `compositionstart、compositionend、compositionupdate` 事件，且在文本合成期间会触发 `input` 事件
@input	EventHandle		当键盘输入时，触发input事件，event.detail = {value}
@focus	EventHandle		输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
@blur	EventHandle		输入框失去焦点时触发，event.detail = {value: value}
@confirm	EventHandle		点击完成按钮时触发，event.detail = {value: value}
@keyboardheightchange	eventhandle		键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}

Tips：input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height 样式无效。

    <!-- 错误写法 -->
	<input :type="isText?'text':'number'" placeholder="请输入内容" />

        <!-- 正确写法 -->
	<input v-if="isText" type="text" placeholder="请输入文本" />
	<input v-else  type="number"  placeholder="请输入数字" />

1
2
3
4
5
6

type 有效值

值	说明
text	文本输入键盘
number	数字输入键盘
digit	带小数点的数字键盘
tel	电话输入键盘

注意事项

原html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在小程序规范中，input仅仅是输入框。其他功能有单独的组件或API
小程序平台，number 类型只支持输入整型数字。
如果需要在小程序平台输入浮点型数字，请使用 digit 类型。
小程序端input在置焦时，会表现为原生控件，此时会层级变高。如需前端组件遮盖input，需让input失焦，或使用cover-view等覆盖原生控件的方案，
input组件若不想弹出软键盘，可设置为disabled

confirm-type 有效值

值	说明
send	右下角按钮为“发送”
search	右下角按钮为“搜索”
next	右下角按钮为“下一个”
go	右下角按钮为“前往”
done	右下角按钮为“完成”

← button label →