Input输入框

查看源码components/input.go

真实编辑#

Web 与原生 provider 连接同一个 Go Editor，支持中英文输入、选区与 IME。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

name := tree.ID(page, "name")
f.Input(components.InputSnapshot{
    ID: name, Label: "Name", Value: value,
    Placeholder: "Type in Chinese or English…",
})

空值提示#

空值显示 placeholder；聚焦后由当前平台文本服务显示光标。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

f.Input(components.InputSnapshot{
    ID: tree.ID(page, "name"), Label: "Name", Value: "",
    Placeholder: "Type in Chinese or English…",
})

校验状态#

演示规则：非空文本含 @ 即解除错误，不作为完整邮箱校验。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

invalid := value == "" || !strings.Contains(value, "@")
f.Input(components.InputSnapshot{
    ID: tree.ID(page, "email"), Label: "Email", Value: value,
    Placeholder: "name@example.com", Invalid: invalid,
})

禁用与只读#

两个固定文本样本均不向平台 provider 暴露 Editor。

启用 JavaScript 后可运行预览；源码和安装命令仍可直接查看。

f.Input(components.InputSnapshot{
    ID: tree.ID(page, "disabled"), Label: "Disabled",
    Value: "Not editable", Disabled: true,
})
f.Input(components.InputSnapshot{
    ID: tree.ID(page, "read-only"), Label: "Read-only",
    Value: "Viva · read-only text", ReadOnly: true,
})

安装

将组件源码复制到自己的项目，直接修改。

go run ./cmd/viva add --out ./components/local input

文本由应用持有#

PaintInput 绘制输入快照与命中区域。Web 与原生文本桥接连接同一个由调用方持有的 Go Editor；Editor 保存文本、选区与组合输入，各平台只负责传递文本系统事件。

仅在字段真正拥有平台编辑焦点时隐藏静态文字。
失焦时，在关闭平台编辑器的同一帧将当前文本重新绘制为静态标签。
InputSnapshot 的选区使用 UTF-8 字节偏移，平台文本事件使用 rune 索引，两者不可混用。

编辑与限制#

Web 与原生示例通过同一个 Go Editor 处理插入、退格、删除、左右移动、Shift 扩选与组合输入。macOS 还支持点击定位、拖动选区和 Command-A。

单行输入中 Tab 用于切换焦点，不插入制表符。
只读和禁用示例不启用平台编辑器。
浏览器与桌面桥接仅事件传输方式不同，应用文本状态始终由同一份 Go 状态持有。
各平台的剪贴板快捷键、撤销重做和多行编辑需要分别验证。

键盘操作

Tab 在控件间移动；Ctrl/⌘ K 搜索组件。进入预览后，键盘事件由 Go 运行时处理。