`
lucane
  • 浏览: 122239 次
  • 性别: 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提示框

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



分享到:
评论

相关推荐

    网页上的提示框(原代码)

    tipBox.className = 'tip-box'; // 设置CSS类名 // 设置提示文本 tipBox.innerHTML = titletips; // 将提示框添加到页面 document.body.appendChild(tipBox); } // 在需要显示提示的地方调用此函数 showTip...

    jQuery tinyTips动态信息提示框使用方法实例

    在IT行业中,jQuery是一个...1. **引入jQuery和tinyTips**:在HTML文件的`&lt;head&gt;`标签内,加入jQuery库和tinyTips的JavaScript文件引用。 ```html &lt;script src="https://code.jquery.com/jquery-3.x.min.js"&gt;&lt;/script&gt; ...

    VC++常用功能实例

    54、如何正确显示包含标签字符的串 60 55、串太长时如何在其末尾显示一个省略号 60 56、如何快速地格式化一个CString对象 61 57、为什么即使调用EnableMenuItem菜单项后,菜单项还处于禁止状态 61 58、如何给系统...

    VC++常用的共用函数100多页

    54、如何正确显示包含标签字符的串 60 55、串太长时如何在其末尾显示一个省略号 60 56、如何快速地格式化一个CString对象 61 57、为什么即使调用EnableMenuItem菜单项后,菜单项还处于禁止状态 61 58、如何给系统...

    1345个易语言模块

    BOX.EC BPL专用更新模块.ec BPL综合模 块.ec BPL高级模块.ec ButtonEx.ec bzfec.ec cards.ec change.ec CM.ec commodity.ec coolp.ec Cool 皮肤模块.ec copy_dir.ec cpuusage.ec CPU占用率检测模块.ec CPU占用率检测...

    1350多个精品易语言模块

    BOX.EC BPL专用更新模块.ec BPL综合模 块.ec BPL高级模块.ec ButtonEx.ec bzfec.ec cards.ec change.ec CM.ec commodity.ec coolp.ec Cool 皮肤模块.ec copy_dir.ec cpuusage.ec CPU占用率检测模块.ec CPU占用率检测...

Global site tag (gtag.js) - Google Analytics