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);
转播
