# Input 文本框

# 介绍

用于输入或编辑一行文本。

# 使用指南

# 默认模式

<tms-input placeholder="placeholder"/>

# 定义初始值，监听点击取消按钮

<tms-input custom-value="初始值" placeholder="这是placeholder" bind:on-tap-action-button="onTapCancelButton"/>

Component({
    methods: {
        onTapCancelButton() {}
    }
})

# 无背景模式

<tms-input show-background="{{false}}"/>

# 非法输入

<tms-input custom-value="123123" invalid/>

# 数字模式

只能输入整数；type为digit时可以输入整数或小数。

<tms-input custom-value="888" type="number"/>

# 禁用

<tms-input disabled custom-value="被禁用"/>

# API

大部分API都继承了微信官方input组件，请查看微信官方文档 (opens new window) 了解更多。

属性	说明	类型	默认值
custom-value	输入框内容	string	''
custom-style	自定义样式	string	''
action-text	右侧文字	string	'取消'
placeholder-style	请查看微信官方文档	string	''
confirm-type	请查看微信官方文档	string	''
placeholder	请查看微信官方文档	string	''
type	请查看微信官方文档	string	'text'
text-align	文本对齐方向	string	'left'
confirm-hold	请查看微信官方文档	boolean	false
disabled	请查看微信官方文档	boolean	false
readonly	是否只读模式	boolean	false
auto-focus	请查看微信官方文档	boolean	false
focus	请查看微信官方文档	boolean	false
show-background	关闭无背景模式	boolean	true
clearable	是否显示清除图标	boolean	true
invalid	无效输入模式	boolean	false
adjust-position	请查看微信官方文档	boolean	true
hold-keyboard	请查看微信官方文档	boolean	false
always-embed	请查看微信官方文档	boolean	false
password	请查看微信官方文档	boolean	false
maxlength	请查看微信官方文档	number	-1
cursor	请查看微信官方文档	number	-1
selection-start	请查看微信官方文档	number	-1
selection-end	请查看微信官方文档	number	-1
cursor-spacing	请查看微信官方文档	number	50

# EVENTS

属性	说明	类型
bind:on-tap-action-button	点击右侧文字事件	(event) => {}
bind:clear-input	点击清除按钮事件	(event) => {}
bind:content-change	输入框内容变化时调用	(event) => {}
bind:click	点击输入框内容区域事件	(event) => {}
bind:blur	请查看微信官方文档	(event) => {}
bind:focus	请查看微信官方文档	(event) => {}
bind:confirm	请查看微信官方文档	(event) => {}
bind:keyboardheightchange	请查看微信官方文档	(event) => {}

# CSS变量

// 文本颜色
--input-text-color: #333333;
// 数字模式字体大小
--input-number-font-size: 54rpx;
// 数字模式字体颜色
--input-number-text-color: #4A89FF;
// 输入区域高度
--input-content-height: 76rpx;
// 无背景模式内容高度
--input-full-mode-content-height: 100rpx;
// 无背景模式边框
--input-full-mode-border: 2rpx solid rgba(153, 153, 153, .4);
// 无背景模式聚焦时边框
--input-full-mode-focus-border: 2rpx solid #4a89ff;
// 输入错误时文本颜色
--input-error-text-color: rgb(255, 47, 79);
// 禁用状态透明度
--input-disabled-opacity: .6;
// 占位符颜色
--input-placeholder-text-color: #BFC0C3;
// 清除图标大小
--input-clear-icon-size: 30rpx;

# FAQ

请查看微信官方文档

← Image 图片轻提示 Toast →