Extjs4学习笔记-Ext.EventManager

最新推荐文章于 2023-06-01 10:21:03 发布

愤怒的根号三

最新推荐文章于 2023-06-01 10:21:03 发布

阅读量234

点赞数

分类专栏： ExtJS 文章标签： Ext.EventManager

ExtJS 专栏收录该内容

32 篇文章

订阅专栏

本文演示了如何使用ExtJS框架的EventManager来实现输入框聚焦与失焦时的提示功能。通过绑定focus和blur事件，当输入框获得焦点时清空默认提示文字，在失去焦点且未输入内容时恢复提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.EventManager.on(el, eventName, fn[, scope, options])

实现输入框获得焦点时，不显示“请输入”，失去焦点，并且没有输入任何字符时，显示“请输入”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Console Test</title>
		
		<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="../extjs/bootstrap.js"></script>
		<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
		
		<script type="text/javascript">
			
			Ext.onReady(function() {
				var focus = function(e, el) {
				if(el.value == "请输入") {
					el.value = "";
					}
				}
				
				var blur = function(e, el) {
					if(el.value == "") {
						el.value = "请输入";
					}
				}
				
				//一次只绑定一个事件
				Ext.EventManager.on("input1", "focus", focus);
				Ext.EventManager.on("input1", "blur", blur);
				
				//一次绑定多个事件
				Ext.EventManager.on("input2", {
					focus: focus,
					blur: blur
				});
				
				//一次绑定多个事件，使用不同配置项的方式为id为input3的输入框绑定事件
				Ext.EventManager.on("input3", {
					focus: {fn: focus},
					blur: {fn: blur}
				});
								
			});
			
		</script>
		
		
	</head>
	<body>
		<input type="text" id="input1" value="请输入" />
		<input type="text" id="input2" value="请输入" />
		<input type="text" id="input3" value="请输入" />
	</body>
</html>