输入框显示不全解决方案

阅读更多

1、页面文本框显示不全插件

2、包含输入框、文本框、下拉框

3、支持Jquery、原生js，优先Jquery，直接引入插件即可使用

4、效果如下:

5、附件是代码
 

(function(window, $, undefined) {
	'use strict';

	var isJquery = ($ ? true : false);

	function ElementTips() {};

	/**
	 * 创建提示
	 * [createTips description]
	 * @param  {[type]} x     [description]
	 * @param  {[type]} y     [description]
	 * @param  {[type]} val   [description]
	 * @param  {[type]} width [description]
	 * @return {[type]}       [description]
	 */
	ElementTips.prototype.createTips = function createTips(x, y, val, width) {
		this.id = 'tips_' + Math.floor(Math.random() * 1e1);
		var div = document.createElement('div');
		div.id = this.id;
		div.innerHTML = val;
		div.style.cssText = 'border-radius:5px;width:' + width + 'px;font-size:12px;border:1px solid #000;position:absolute;background:#FFFFBB;padding:1px;color:#000;top:' + y + 'px;left:' + x + 'px;z-index:1000';
		document.body.appendChild(div);
		return div;
	}


	/**
	 * 初始化
	 * [init description]
	 * @return {[type]} [description]
	 */
	ElementTips.prototype.init = function() {
		isJquery ? this.jqueryEvent() : this.baseEvent();
	};


	/**
	 * jQuery实现
	 * [jqueryEvent description]
	 * @return {[type]} [description]
	 */
	ElementTips.prototype.jqueryEvent = function() {
		var _this = this;
		$(':input').mouseover(function(e) {
			var val = _this.getElementValCommand(e),
				position = _this.mousePosition(e);
			if (!val) {
				return;
			}
			$(this).data('data', _this.createTips(position.x, position.y, val, $(this).width()));

		}).mouseout(function() {
			if ($(this).data('data')) {
				document.body.removeChild($(this).data('data'));
			}
		}).mousemove(function(e) {
			if ($(this).data('data')) {
				var position = _this.mousePosition(e);
				$($(this).data('data')).css({
					"top": position.y + "px",
					"left": position.x + "px"
				});
			}
		})
	}


	/**
	 * JS实现
	 * [baseEvent description]
	 * @return {[type]} [description]
	 */
	ElementTips.prototype.baseEvent = function() {
		var _this = this,
			tagNames = "INPUT,TEXTAREA,SELECT",
			typs = "TEXT";

		function elementEvent(type) {
			var inputs = document.getElementsByTagName(type);
			for (var i = 0, len = inputs.length; i < len; i++) {
				var item = inputs[i];
				(function(item) {
					var tagName = item.tagName.toUpperCase(),
						type = item.type.toUpperCase();
					if (tagNames.indexOf(tagName) !== -1) {
						if (tagName !== "INPUT") {
							bindMouseEvent(item);
						} else {
							if (type === "TEXT") {
								bindMouseEvent(item);
							}
						}
					}
				})(item);
			}
		}

		//绑定事件
		function addEvent(element, type, handler) {
			if (window.addEventListener) {
				addEvent = function(element, type, handler) {
					element.addEventListener(type, handler, false);
				}
			} else if (window.attachEvent) {
				addEvent = function(element, type, handler) {
					element.attachEvent('on'+type, handler);
				}
			} else {
				addEvent = function(element, type, handler) {
					element['on' + type] = handler;
				}
			}
			addEvent(element, type, handler);
		}


		//绑定鼠标事件
		function bindMouseEvent(item) {
			addEvent(item, 'mouseover', function(e) {
				var val = _this.getElementValCommand(e),
					position = _this.mousePosition(e);
				_this.createTips(position.x, position.y, val, item.clientWidth);
			});

			addEvent(item, 'mouseout', function(e) {
				if (_this.id) {
					document.body.removeChild(document.getElementById(_this.id));
				}
			});

			addEvent(item, 'mousemove', function(e) {
				var position = _this.mousePosition(e),
					element = document.getElementById(_this.id);
				element.style.top = position.y + 'px';
				element.style.left = position.x + 'px';

			});
		}

		var array = tagNames.split(',');
		array.forEach(function(item) {
			elementEvent(item.toLowerCase());
		})
	}

	/**
	 * 鼠标位置
	 * [mousePosition description]
	 * @param  {[type]} e [description]
	 * @return {[type]}   [description]
	 */
	ElementTips.prototype.mousePosition = function(e) {
		return {
			x: e.pageX + 10,
			y: e.pageY + 10
		}
	}


	/**
	 * 获取元素属性值
	 * [getElementVal description]
	 * @param  {[type]} e [description]
	 * @return {[type]}   [description]
	 */
	ElementTips.prototype.getElementValCommand = function(e) {
		var target = e.target || e.srcElement,
			tagName = target.tagName.toUpperCase();
		var elementTag = {
			"SELECT": function() {
				return target.options[target.options.selectedIndex].text;
			},
			"INPUT": function() {
				var _type = target.type.toUpperCase();
				var type = {
					"TEXT": function() {
						return target.value;
					}
				}
				return type[_type] ? type[_type]() : '';

			},
			"TEXTAREA": function() {
				return target.value;
			}
		}
		return elementTag[tagName] ? elementTag[tagName]() : '';
	}


	var elementTips = new ElementTips();
	elementTips.init();


})(this, this.jQuery);

 

 

• 
• 大小: 13.1 KB

• 查看图片附件