`

EasyUI textbox事件，EasyUI textbox input events

    博客分类：
  • js
EasyUItextboxinput事件easyui-textbox 
阅读更多

在使用UasyUI的时候，在一般的input输入框上添加class="easyui-textbox"属性，则在该输入框上添加的事件将不起作用，但是如果去掉class="easyui-textbox"变成一般的input则起作用。

控件的生成原理，它是把你原有的input隐藏，然后自己生成一个新的input，所以你点击的已经不是原来那个input也就没回应了。

目前我有三种方案，其中方案一最好，因为他是在EasyUI的基础上的方案，其他两种也能解决，但是方案二要加图标或按钮，相信大多人都不愿意，方案三是原生的JS起的作用。可以参考官网文档：http://www.jeasyui.com/documentation/textbox.php

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>textbox input events</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
	<h2>textbox input events</h2>
	<div style="margin:20px 0;"></div>
	<div class="easyui-panel" title="New Topic" style="width:400px">
		<div style="padding:10px 60px 20px 60px">
	    <form id="ff" method="post">
	    	<table cellpadding="5">
	    		<tr>
	    			<td>Name:</td>
	    			<td><input class="easyui-textbox" type="text" id="name" name="name" data-options="required:true"></input></td>
	    		</tr>
	    	</table>
	    </form>
	    </div>
	</div>
	<script>
		$(function() {
			$('#name').textbox('textbox').bind('click', function() {
				alert(1);
			});
			
			//$('#name').textbox({
				//iconWidth : 15,
				//icons : [ {
					//iconCls : 'icon-add',
					//handler : function(e) {
						//alert(2);
					//}
				//} ]

			//});

			//$('input', $('#name').next('span')).click(function() {
				//alert(3);
			//});
		});
	</script>
</body>
</html>

 

分享到：
| Jersey返回对象以json格式呈现，java.lang. ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics