js辅助输入层 PHP

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

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

界面如下：

核心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;
}

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