ZK 9中Textbox设置inputmode报错，求移动端适配方案

问题原因 #

ZK 9版本的org.zkoss.zul.Textbox类未提供setInputmode()方法，因此无法通过lang-addon.xml直接配置该属性。

解决方案 #

方案1：直接在ZUL中通过clientAttribute设置inputmode #

这是最简单的实现方式，clientAttribute会将属性直接渲染到底层的<input>标签上，唤起对应类型的移动端键盘，同时保留ZK原生的onOk事件触发逻辑：

<textbox 
    clientAttribute="inputmode=search" 
    onOk="@command('handleSearch')" 
/>

• 参数说明：inputmode支持search、numeric、tel、email等取值，对应不同类型的移动端键盘。
• OnOk事件兼容：ZK的Textbox默认按下回车键会触发onOk事件；若遇到特殊场景无法触发，可添加客户端键盘监听强制触发：

<textbox 
    clientAttribute="inputmode=search"
>
    <attribute name="onKeyDown">
        if (event.keyCode == 13) {
            self.fire('onOk', null, {toServer: true});
        }
    </attribute>
    <attribute name="onOk">
        // 此处编写你的业务逻辑，例如：
        alert('搜索操作触发');
    </attribute>
</textbox>

方案2：自定义扩展Textbox组件（全局复用场景） #

如果需要在多个页面复用带inputmode的文本框，可以自定义组件扩展Textbox，添加inputmode属性支持：

1. 创建Java扩展类：

package com.your.project;

import org.zkoss.zul.Textbox;

public class ExtendedTextbox extends Textbox {
    private String inputmode;

    public String getInputmode() {
        return inputmode;
    }

    public void setInputmode(String inputmode) {
        if (inputmode == null || inputmode.equals(this.inputmode)) return;
        this.inputmode = inputmode;
        smartUpdate("inputmode", inputmode);
    }

    @Override
    protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer) throws java.io.IOException {
        super.renderProperties(renderer);
        if (inputmode != null) {
            renderer.render("inputmode", inputmode);
        }
    }
}

2. 在lang-addon.xml中注册组件：

<component>
    <component-name>extendedtextbox</component-name>
    <component-class>com.your.project.ExtendedTextbox</component-class>
    <extends>textbox</extends>
</component>

3. 在ZUL中使用自定义组件：

<extendedtextbox 
    inputmode="search" 
    onOk="@command('handleSearch')" 
/>

原生标签备选方案 #

若尝试使用ZK的native命名空间原生<input>标签，需手动绑定事件触发ZK业务逻辑，示例如下：

<n:input 
    xmlns:n="native"
    type="text" 
    inputmode="search"
    onkeyup="if(event.keyCode === 13) { zk.Widget.$('#searchTrigger').fire('onClick'); }"
/>
<!-- 隐藏按钮用于触发ZK的command -->
<button id="searchTrigger" visible="false" onClick="@command('handleSearch')" />

该方式需要额外处理事件映射，不如前两种方案简洁，仅作为备选。

内容的提问来源于stack exchange，提问作者Vinz