如何通过自定义控件监听文本框输入

关键词：自定义控件

一、需求

自定义控件，文本框输入的监听，当每一个字符发生变化时，都会触发监听，并传递到后台的java代码上。

二、思路与方案

1. 编写自定义控件，使用js代码监听文本框的输入，并返回给java插件。

2. 编写java插件，接收js传递过来的参数，打印参数。

三、实现过程

1. 编写前端插件

index.js

(function(KDApi) {

    function MyComponent(model) {
        this._setModel(model)
    }

    MyComponent.prototype = {
        _setModel: function(model) {
            this.model = model
        },
        init: function(props) {
            setHtml(this.model, props)
        },
        update: function(props) {
            setText(this.model)
        },
        destoryed: function() {

        }

    }


    /*
     * 外部函数声明
     */
    var setHtml = function(model, props) {
        KDApi.getTemplateStringByFilePath('./html/text.html', model, {})
            .then(function(result) {
                model.dom.innerHTML = result
                configTextarea(model)
            })

    }

    function configTextarea(model) {
        var t = document.getElementById('textfof')
        if (t !== null) {
            document.getElementById('textfof').focus()
            document.getElementById('textfof').oninput = function() {
                model.invoke('input', document.getElementById('textfof').value)
            }
        }
    }


    KDApi.register('textfof', MyComponent)

})(window.KDApi)

text.html

<div>
    <textarea id="textfof"></textarea>
</div>

2.压缩成zip包

3.新建单据，拖入自定义控件，上传控件方案

4.编写java插件：

package kd.ecos.demo;

import kd.bos.form.events.CustomEventArgs;
import kd.bos.form.plugin.AbstractMobFormPlugin;

public class DemoMobListenInputPlugin extends AbstractMobFormPlugin {
    @Override
    public void customEvent(CustomEventArgs e) {
        String eventName = e.getEventName();
        if ("input".equals(eventName)) {
            System.out.println("前端输入了值:" + e.getEventArgs());
        }
    }
}

5.注册插件

四、效果图

点击预览，预览移动端界面，前端输入字符：

java插件后台打印字符：

五、开发环境版本

六、注意事项

自定义控件的注意事项、异常场景排查，参考文章

从零开始使用自定义控件，请参考我的其他文章

七、参考资料

【开发平台】指导手册

学习成长中心

自定义控件开发

八、附件

控件方案 (textfof.zip) 已上传

源单码和补丁包 (自定义控件-监听文本框输入.zip) 已上传