jQuery EasyUI/TopJUI输入框事件监听

代码如下：

<div data-toggle="topjui-panel" title="" data-options="fit:true,iconCls:'icon-ok',footer:'#footer'">

    <div class="topjui-container">

        <fieldset>

            <legend>输入框事件监听演示</legend>

        </fieldset>

        <div class="topjui-row">

            <div class="topjui-col-sm12">

                <label class="topjui-form-label">姓名(单选)</label>

                <div class="topjui-input-block">

                    <input type="text" name="userName" value=""

                           data-toggle="topjui-textbox"

                           data-options="id:'userName',prompt:'点击事件监听',readonly:true">

                </div>

            </div>

        </div>

        <div class="topjui-row">

            <div class="topjui-col-sm12">

                <label class="topjui-form-label">姓名(多选)</label>

                <div class="topjui-input-block">

                    <input type="text" name="userName2" value=""

                           data-toggle="topjui-textbox"

                           data-options="id:'userName2',prompt:'点击事件监听',readonly:true">

                </div>

            </div>

        </div>

        <div class="topjui-row">

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">小写转大写</label>

                <div class="topjui-input-block">

                    <input type="text" name="enlighName" value=""

                           data-toggle="topjui-textbox"

                           data-options="id:'uppercase',prompt:'键盘事件监听'">

                </div>

            </div>

            <div class="topjui-col-sm6">

                <label class="topjui-form-label">大写转小写</label>

                <div class="topjui-input-block">

                    <input type="text" name="enlighName" value=""

                           data-toggle="topjui-textbox"

                           data-options="id:'lowercase',prompt:'键盘事件监听'">

                </div>

            </div>

        </div>

    </div>

</div>

　　js:

<script>

    $(function () {

        // 1 弹框的基本属性配置

        var opts = {

            id: 'userDialog',// 唯一标识id

            title: '自定义打开一个窗口',// 标题

            closed: false, // 关闭状态

            height: 450, // 高度

            width: 700, // 宽度

            href: '', // 加载页面元素的地址

            buttons: [

                {text: '关闭', iconCls: 'fa fa-close', btnCls: 'topjui-btn-red', handler: closeMyDialog}//调用下面closeMyDialog方法

            ]

        };

        var $userDialog = $('<div></div>');// 创建元素<div>

        // 2.1 给id=userName 的textbox绑定事件 打开单选弹框

        $('#userName').textbox('textbox').bind('click', function (e) {

            opts.href = _ctx + '/html/complex/dialog_user.html';

            $userDialog.iDialog(opts)

        });

        // 2.2 给id=userName2 的textbox绑定事件 打开多选弹框

        $('#userName2').textbox('textbox').bind('click', function (e) {

            opts.href = _ctx + '/html/complex/dialog_user2.html';

            $userDialog.iDialog(opts)

        });

    })

    /**

     * @description   关闭面板方法

     */

    function closeMyDialog() {

        $('#userDialog').iDialog('destroy');

    }

</script>

<!--键盘事件JS-->

<script>

    $(function () {

        $('#uppercase').textbox('textbox').bind('keyup', function (e) {

            var val = $('#uppercase').iTextbox('getText');

            $('#uppercase').iTextbox('setText',val.toUpperCase())

        });

        $('#lowercase').textbox('textbox').bind('keyup', function (e) {

            var val = $('#lowercase').iTextbox('getText');

            $('#lowercase').iTextbox('setText',val.toLowerCase())

        });

    })

</script>