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>
EasyUI中文网:http://www.jeasyui.cn
TopJUI前端框架:http://www.topjui.com
TopJUI交流社区:http://ask.topjui.com