<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>

<script>$(function () {// 1 弹框的基本属性配置var opts = {id: 'userDialog',// 唯一标识idtitle: '自定义打开一个窗口',// 标题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>