input输入浮动提示

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1.js"></script>
</head>
<body>
<input onmouseover="wsug(event,‘【提示】<br/>此信息来自病人档案,如需修改请去病人档案处修改。‘)" onmouseout="wsug(event,0)"/>
</body>
</html>

js代码:

/**
 * Created by acer on 2016/7/4.
 */
//鼠标放在input上 出现提示信息
function wsug(e, str) {
    var oThis = arguments.callee;
    if (!str) {
        oThis.sug.style.visibility = ‘hidden‘;
        document.onmousemove = null;
        return;
    }
    if (!oThis.sug) {
        var div = document.createElement(‘div‘), css = ‘top:0; left:0; position:absolute; z-index:100; visibility:hidden‘;
        div.style.cssText = css;
        div.setAttribute(‘style‘, css);
        var sug = document.createElement(‘div‘), css = ‘font:normal 12px/16px "宋体"; white-space:nowrap; color:#666; padding:3px; position:absolute; left:0; top:0; z-index:10; background:#f9fdfd; border:1px solid #0aa‘;
        sug.style.cssText = css;
        sug.setAttribute(‘style‘, css);
        var dr = document.createElement(‘div‘), css = ‘position:absolute; top:3px; left:3px; background:#333; filter:alpha(opacity=50); opacity:0.5; z-index:9‘;
        dr.style.cssText = css;
        dr.setAttribute(‘style‘, css);
        var ifr = document.createElement(‘iframe‘), css = ‘position:absolute; left:0; top:0; z-index:8; filter:alpha(opacity=0); opacity:0‘;
        ifr.style.cssText = css;
        ifr.setAttribute(‘style‘, css);
        div.appendChild(ifr);
        div.appendChild(dr);
        div.appendChild(sug);
        div.sug = sug;
        document.body.appendChild(div);
        oThis.sug = div;
        oThis.dr = dr;
        oThis.ifr = ifr;
        div = dr = ifr = sug = null;
    }
    var e = e || window.event, obj = oThis.sug, dr = oThis.dr, ifr = oThis.ifr;
    obj.sug.innerHTML = str;

    var w = obj.sug.offsetWidth, h = obj.sug.offsetHeight, dw = document.documentElement.clientWidth
        || document.body.clientWidth;
    dh = document.documentElement.clientHeight || document.body.clientHeight;
    var st = document.documentElement.scrollTop || document.body.scrollTop, sl = document.documentElement.scrollLeft
        || document.body.scrollLeft;
    var left = e.clientX + sl + 17 + w < dw + sl && e.clientX + sl + 15
        || e.clientX + sl - 8 - w, top = e.clientY + st + 17 + h < dh + st
        && e.clientY + st + 17 || e.clientY + st - 5 - h;
    obj.style.left = left + 10 + ‘px‘;
    obj.style.top = top + 10 + ‘px‘;
    dr.style.width = w + ‘px‘;
    dr.style.height = h + ‘px‘;
    ifr.style.width = w + 3 + ‘px‘;
    ifr.style.height = h + 3 + ‘px‘;
    obj.style.visibility = ‘visible‘;
    document.onmousemove = function(e) {
        var e = e || window.event, st = document.documentElement.scrollTop
            || document.body.scrollTop, sl = document.documentElement.scrollLeft
            || document.body.scrollLeft;
        var left = e.clientX + sl + 17 + w < dw + sl && e.clientX + sl + 15
            || e.clientX + sl - 8 - w, top = e.clientY + st + 17 + h < dh
            + st
            && e.clientY + st + 17 || e.clientY + st - 5 - h;
        obj.style.left = left + ‘px‘;
        obj.style.top = top + ‘px‘;
    }
}

页面显示:

时间: 2024-10-18 03:04:40

input输入浮动提示的相关文章

简单的文本框输入自动提示

简单的文本框输入自动提示--输入的时候可以直接异步加载数据库中匹配的项,然后显示出来. 这里没有使用到数据库,直接在PHP用数组模拟数据存储.  demo演示 原理主要是: 监听输入框的状态,当有改变的时候即刻通过ajax发送数据并取得返回值. 主要使用了jQuery封装很方便,但貌似我这个兼容性不咋地...主要提供个思路吧~ js部分: <script type="text/javascript" src="./js/jquery.min.js">&l

Js_Ajax_输入词提示

输入"1",有提示,否则没有 suggest.jsp #suggest { background-color: #e0e0e0; width: 200px; } var xhr; function createXhr() { if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } } /* 提示词

密码输入强度提示实例代码

密码输入强度提示实例代码:现在众多的网站的注册表单,在填写密码的时候能够实时的给出密码强度提示,这可以提醒用户当前输入的密码安全程度,算是非常人性化的一个举措,下面就通过一个实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww

实现文本框输入内容提示代码实例

实现文本框输入内容提示代码实例:比较人性化的网站一般都是比较讲究细节的,比如文本框输入内容具有提示效果,在默认情况下,文本框有提示文本,当鼠标放入文本框输入文本的时候,提示文本会消失,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="ht

HTML5 Placeholder实现input背景文字提示效果

这篇文章我们来看看什么是input输入框背景文字提示效果,如下图所示: 这种效果现在网上非常的普遍流行,但大部分是使用JavaScript实现的.但HTML5给我们提供了新的纯HTML的实现方式,不需要任何的JavaScript,只需要在你的input文本框的标记上添加HTML5规范里新增的placeholder属性,然后在属性值里输入你需要的提示信息. 语法基本是这个样子:<input placeholder=”提示信息...”> HTML代码 <form> <input

输入型提示语消失/点击型提示语消失

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

DataList:HTML5中的input输入框自动提示宝器

DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新增的一个非常有用的元素. DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么. HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单! <label for="country_name"

jQuery 下拉框输入匹配提示选项

做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示 HTML代码 <div style="width: 540px;"> <label class="control-label sr-only" for="search_dchannel_repo"></label> <input class="for

314 Ajax案例:邮箱地址验证,搜索框输入自动提示,省市区三级联动

Aja案例接口文档 测试地址:http://localhost:3000 请求参数类型:application/x-www-form-urlencoded 邮箱地址验证 简要描述 验证邮箱@itcast.cn地址是否唯一,已注册 [[email protected]符合规则,未注册itheima] 请求地址 /verifyEmailAdress 请求方式 GET 参数 参数名 必选 类型 说明 email 是 string 待验证邮箱地址 返回值 {message: '邮箱地址已经注册过了, 请