js辅助输入层

当输入一些文本时,可能允许用户选择已有的。方便用户选择。

当焦点在文本框时,显示选择层,当点击其他地方时隐藏。

界面如下:

js辅助输入层

核心JS

var arrMsg = new Array();
function msgInput(o, msgDiv)
{
var p = o;
var x=p.offsetLeft;
var y=p.offsetTop;
//获取位置
while(p=p.offsetParent)
{
x+=p.offsetLeft;
y+=p.offsetTop;
}
y += o.offsetHeight + 2;

if(typeof(msgDiv) == 'string')
{
msgDiv = document.getElementById(msgDiv);
}
//显示选择层
msgDiv.style.top = y + 'px';
msgDiv.style.left = x + 'px';
msgDiv.style.display = 'block';

if(!o.data_isAddArrMsg)
{
arrMsg.push({o1:o, o2:msgDiv});
o.data_isAddArrMsg = true;
}

//隐藏其他层
hideMsg(o);
}

//当点击其他地方时,隐藏选择层
document.documentElement.onclick=function(evt)
{
var evt = evt || event;
var el = evt.srcElement || evt.target;
hideMsg(el);
}

//隐藏选择层
function hideMsg(el)
{
for(var i=0; i<arrMsg.length; i++)
{
if(!inElement(el,arrMsg[i].o1) && !inElement(el,arrMsg[i].o2))
{
arrMsg[i].o2.style.display = 'none';
}
}
}

//判断元素是否在其中
function inElement(el, o)
{
if(el == o) return true;
while(el = el.offsetParent)
if(el == o)return true;

return false;
}

实例下载:http://files.cnblogs.com/zjfree/jsMsgInput.rar

 

你可能感兴趣的:(js)