EasyUI textbox事件，EasyUI textbox input events

最新推荐文章于 2025-05-18 22:33:01 发布

原创最新推荐文章于 2025-05-18 22:33:01 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EasyUI #textbox #input事件 #easyui-textbox

js 专栏收录该内容

20 篇文章

订阅专栏

本文探讨了在使用EasyUI时遇到的输入框事件失效问题，并提供了三种解决方案，包括在EasyUI基础上的改进方案、使用原生JS的方案以及添加图标或按钮的方案。详细介绍了每种方案的优缺点。

在使用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>