Input

输入框是最基本的接收用户文本输入的组件。

代码演示

如何引入

import { Input, TextArea, InputGroup } from '@chenzy-design/svelte';

基本

基本使用

三种大小

默认定义了三种尺寸：大、默认、小

不可用

设定 disabled 属性为 true

前缀/后缀

在输入框上增加前缀、后缀图标，可以是任意节点。

当 prefix、suffix 传入的内容为文本或者图标时，会自动带上左右间隔，若为自定义节点，则左右间隔为 0。

前置/后置标签

在输入框上增加前置/后置标签

当 addonBefore、addonAfter 传入的内容为文本或者图标时，会自动带上左右间隔，若为自定义节点，则左右间隔为 0。

带移除图标

点击图标删除所有内容

密码模式

隐藏输入的具体内容

校验状态

可设置不同校验状态，展示不同样式

受控组件

Input 值完全取决于传入的 value 值，配合 onChange 回调函数使用

输入框组合

可以将多个输入框放入 InputGroup 的容器中，通过设置 size、disabled 可统一设置组合中的输入框属性，支持输入框类型包括：Input、InputNumber、Select、AutoComplete、TreeSelect、Cascader、DatePicker。

多行输入框

用于多行输入。通过设置 maxCount 属性可以进行字数限制并显示字数统计。支持 showClear。

设置 TextArea 高度

通过 textareaStyle 可以设置内部 textarea 元素的样式，如高度、背景色等。

行号

通过设置 showLineNumber 展示行号。可用 lineNumberStart 设置起始行号，或通过 lineNumberStyle/lineNumberClassName 自定义行号区样式。

使用 Shift + Enter 换行的多行输入框

TextArea 默认情况下 Enter 回车与 Shift + Enter 均可实现换行。通过适当的事件监听与禁用默认行为，你可以实现禁用 Enter 换行，仅 Shift + Enter 才能换行。

自动扩展的多行输入框

通过设置 autosize 属性可设置只有高度自动随内容增加而变化。

自定义计算字符串长度

通过设置 getValueLength 属性可以自定义计算字符串长度。搭配 maxLength 和 minLength 可以支持 emoji 长度按照可见长度计算。

传入 getValueLength 时，内部做了什么：

• maxLength：不直接透传 maxLength 给原生 input。如果输入长度超出最大限制，则使用上一次输入的合法长度字符。
• minLength：动态切换 minLength 的长度，emoji 按照一个长度计算。
• maxCount：使用 getValueLength 获取的值与 maxCount 进行比较。

输入法模式

通过设置 composition 属性为 true，可以开启输入法模式。在该模式下，使用输入法（如中文拼音）输入时，onChange 不会在输入法未确认（如拼音过程中）触发，而是在输入法确认后触发一次。适用于实时搜索等场景，避免在拼音输入过程中触发不必要的请求。

Input 和 TextArea 均支持该属性。

API 参考

Input

其他属性与 html input 标签保持一致

属性	说明	类型	默认值
addonAfter	后置标签	Snippet | string	-
addonBefore	前置标签	Snippet | string	-
affixIsIcon	prefix/suffix 传 Snippet 时是否按图标间距渲染（Svelte 无法内省 Snippet 内容，显式声明；传非图标节点时设为 false 落到「两侧均不加外边距」的第三态）	boolean	true
ariaDescribedby	关联说明 / 错误文本节点 id	string	-
ariaErrormessage	设置 aria-errormessage 属性	string	-
aria-label	设置 aria-label 属性	string	-
ariaLabelledby	设置 aria-labelledby 属性	string	-
ariaRequired	必填语义（Form.Field required 透传），输出 aria-required	boolean	-
autoFocus	挂载时自动聚焦	boolean	false
borderless	无边框模式	boolean	false
class	根容器自定义类名	string	-
clearIcon	自定义清除按钮图标，showClear 为 true 且有值时生效	Snippet	-
composition	是否开启输入法模式，开启后输入法未确认期间不触发 onChange，输入法确认后触发一次 onChange	boolean	false
defaultValue	输入框内容默认值	string	''
disabled	是否禁用	boolean	false
getValueLength	自定义计算字符串长度（存在时接管 maxLength 校验，原生 maxlength 不下发）	(value: string) => number	-
hideSuffix	清除按钮与后缀标签并存时隐藏后缀标签，默认两者并列	boolean	false
insetLabel	内嵌标签（渲染在输入框内左侧，与 prefix 同槽）	Snippet | string	-
insetLabelId	内嵌标签容器 id（关联 aria）	string	-
inputStyle	input 元素内联样式	string	-
maxLength	原生 maxlength	number	-
minLength	最小长度，下发原生 minlength 触发浏览器校验；配合 getValueLength 时按可见长度换算	number	-
mode	输入框的模式，可选值 password	string	-
prefix	前缀标签	Snippet	-
preventScroll	调用 focus() 时是否阻止滚动文档以显示新聚焦的元素	boolean	false
readonly	是否只读	boolean	false
showClear	输入框有内容且 hover 或 focus 时展示清除按钮	boolean	false
size	输入框大小，large、default、small	string	‘default’
style	根容器内联样式	string	-
suffix	后缀标签	Snippet	-
type	声明 input 类型，同原生 input 标签的 type 属性	string	‘text’
validateStatus	校验状态，可选值 default、error、warning、success，仅影响展示样式	string	‘default’
value	输入框内容（受控）	string	-
onBlur	输入框失去焦点时的回调	(e: FocusEvent) => void	-
onChange	输入框内容变化时的回调	(value: string, e: Event) => void	-
onClear	点击清除按钮时的回调	(e: MouseEvent) => void	-
onEnterPress	按回车时回调（composition 中不触发）	(e: KeyboardEvent) => void	-
onFocus	输入框 focus 时的回调	(e: FocusEvent) => void	-
onInput	原生 input 事件回调	(value: string, e: Event) => void	-
onKeyDown	keydown 回调	(e: KeyboardEvent) => void	-
onKeyPress	keypress 回调	(e: KeyboardEvent) => void	-
onKeyUp	keyup 回调	(e: KeyboardEvent) => void	-
onCompositionStart	compositionstart 回调	(e: CompositionEvent) => void	-
onCompositionEnd	compositionend 回调	(e: CompositionEvent) => void	-
onCompositionUpdate	compositionupdate 回调	(e: CompositionEvent) => void	-

TextArea

其他属性与 html textarea 标签保持一致

属性	说明	类型	默认值
ariaDescribedby	关联说明 / 错误文本节点 id	string	-
ariaErrormessage	设置 aria-errormessage 属性	string	-
aria-label	设置 aria-label 属性	string	-
ariaLabelledby	设置 aria-labelledby 属性	string	-
ariaRequired	必填语义（Form.Field required 透传）	boolean	-
autoFocus	挂载时自动聚焦	boolean	false
autosize	是否随内容自适应高度，可写成对象 { minRows?: number, maxRows?: number }	boolean | object	false
borderless	无边框模式	boolean	false
class	根容器自定义类名	string	''
clearIcon	自定义清除按钮图标	Snippet	-
cols	默认列数	number	-
composition	是否开启输入法模式，开启后输入法未确认期间不触发 onChange，确认后触发一次	boolean	false
count	自定义计数器渲染（覆盖内建），作用域 { count, maxCount, overLimit }	Snippet	-
defaultValue	输入框内容默认值	string	''
disabled	禁用状态	boolean	false
getValueLength	自定义计算字符串长度	(value: string) => number	-
lineNumberClassName	行号区域 className	string	-
lineNumberStart	行号起始值	number	1
lineNumberStyle	行号区域样式	string	-
maxCount	设置字数限制并显示字数统计（不截断）	number	-
maxLength	原生 maxlength（截断输入）	number	-
placeholder	占位文本	string	-
readonly	只读	boolean	false
resize	是否允许拖拽调整尺寸及方向，可选 none | both | horizontal | vertical | block | inline。autosize 开启时忽略；仅显式传入时生效	string	-
rows	默认行数	number	4
showClear	支持清除	boolean	false
showCount	显示字数统计	boolean	false
showLineNumber	是否展示行号	boolean	false
style	外层容器样式	string	-
textareaStyle	textarea 元素的样式，可用于设置高度等	string	-
validateStatus	校验状态，可选 default、error、warning、success	string	‘default’
value	输入框内容（受控）	string	-
onBlur	输入框失去焦点时的回调	(e: FocusEvent) => void	-
onChange	输入框内容变化时的回调	(value: string, e: Event) => void	-
onClear	点击清除按钮时的回调	(e: MouseEvent) => void	-
onEnterPress	按下回车的回调（composition 中不触发）	(e: KeyboardEvent) => void	-
onPressEnter	onEnterPress 别名	(e: KeyboardEvent) => void	-
onFocus	输入框 focus 时的回调	(e: FocusEvent) => void	-
onInput	原生 input 事件回调	(value: string, e: Event) => void	-
onResize	autosize 高度变化，或 resize 拖拽时触发（含 width）	(p: { height: number, width?: number }) => void	-
onKeyDown	keydown 回调	(e: KeyboardEvent) => void	-
onKeyPress	keypress 回调	(e: KeyboardEvent) => void	-
onKeyUp	keyup 回调	(e: KeyboardEvent) => void	-
onCompositionStart	compositionstart 回调	(e: CompositionEvent) => void	-
onCompositionEnd	compositionend 回调	(e: CompositionEvent) => void	-
onCompositionUpdate	compositionupdate 回调	(e: CompositionEvent) => void	-

InputGroup

通用属性将设置到 InputGroup 的子级元素上，例如 disabled 等。如果你在子级设置了 disabled，会覆盖掉 InputGroup 对应属性值。

属性	说明	类型	默认值
class	组的类名	string	-
disabled	禁用（回退透传子控件，子控件显式 disabled 优先）	boolean	-
label	InputGroup 的 label 属性，{ text?, name?, required?, width? }	object	-
labelPosition	label 位置，可选 top 或 left	string	‘top’
size	输入框大小，large、default、small（回退透传子控件）	string	-
style	组的样式	string	-
onBlur	输入框失去焦点时的回调	(e: FocusEvent) => void	-
onFocus	输入框 focus 时的回调	(e: FocusEvent) => void	-

Methods

绑定在组件实例上的方法（Input / TextArea），可以通过实例句柄调用实现某些特殊交互。

名称	描述
blur()	移出焦点
focus()	获取焦点（尊重 preventScroll）

无障碍

ARIA

• 当 validateStatus 为 error 时，输入框的 aria-invalid 为 true。
• 在 Form 中使用时，field label 是 Input 的 aria-label。
• 密码显隐切换按钮带 aria-label（走 i18n 文案），可键盘聚焦。
• 清除按钮走 i18n 文案 aria-label，可键盘聚焦。

键盘和焦点

• Input / TextArea 可被获取焦点，键盘用户可以使用 Tab 及 Shift + Tab 切换焦点。
• 密码按钮可以被聚焦，聚焦后使用 Enter 或者空格键激活。
• 正确处理 IME composition，组合期间不触发 change。

设计变量

animation

color

font

height

other

radius

spacing

width

变量	默认值	用法
--cd-transition-delay-input-bg	var(--cd-motion-delay-none)	输入框-背景色-延迟时间
--cd-transition-delay-input-border	var(--cd-motion-delay-none)	输入框-边框-延迟时间
--cd-transition-delay-input-text	var(--cd-motion-delay-none)	输入框-文字或图标-延迟时间
--cd-transition-duration-input-bg	var(--cd-motion-duration-none)	输入框-背景色-动画持续时间
--cd-transition-duration-input-border	var(--cd-motion-duration-none)	输入框-边框-动画持续时间
--cd-transition-duration-input-text	var(--cd-motion-duration-none)	输入框-文字或图标-动画持续时间
--cd-transition-function-input-bg	var(--cd-motion-ease-in)	输入框-背景色-过渡曲线
--cd-transition-function-input-border	var(--cd-motion-ease-in)	输入框-边框-过渡曲线
--cd-transition-function-input-text	var(--cd-motion-ease-in)	输入框-文字或图标-过渡曲线

显示第 1 条-第 9 条，共 9 条

• 1