`
lucane
  • 浏览: 119009 次
  • 性别: Icon_minigender_1
  • 来自: 江湖
社区版块
存档分类
最新评论

Tip Box,自定义html标签属性

阅读更多
<input type="text" name="usr005" desc="必须输入中文!不多于10个中文字符!" />

// 修改文本框的属性
	(function() {
		var _inputList = document.getElementsByTagName("INPUT");
		var _selectList = document.getElementsByTagName("SELECT");
		var _areaList = document.getElementsByTagName("TEXTAREA");
		
		for (var i = 0; i < _inputList.length; i++) {
			var obj = _inputList[i];
			// onfocus在firefox的text失效bug
			obj.onmouseover = function(e) {
				var _obj = this;
				var desc = _obj["desc"] || _obj.getAttribute("desc");
				e = e || window.event;

				if(desc == undefined) {
					return;
				}
				
				var _div_id = "altas_" + _obj["name"];
				
				var desc_div = document.getElementById(_div_id);
			
				if(!desc_div) {
					desc_div = document.createElement("DIV");
					desc_div.id = _div_id;
				}
				
				desc_div.style.top = e.clientY + "px";
				desc_div.style.left = e.clientX + "px";				
				desc_div.setAttribute("class", "promote");  
				desc_div.innerHTML = desc;	

				desc_div.style.display = "block";	
				document.body.appendChild(desc_div);
			};
			
			obj.onmouseout = function() {
				var _obj = this;
				var _id = "altas_" + _obj["name"];
				var _tip = document.getElementById(_id);
				// 如果该text有tipbox,则隐藏该tipbox
				_tip && (_tip.style.display = "none");
			};
		}
	})();


这样做产生了很多问题,页面会有n多div,有没有名字污染的可能?

多个同名的text会有相同id的div提示框

事件绑定需要改进,需要支持一个事件上绑定多个函数



分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics