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';
}
}
页面显示:
input输入浮动提示的更多相关文章
- DataList:HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...
- Js_Ajax_输入词提示
输入"1",有提示,否则没有 suggest.jsp #suggest { background-color: #e0e0e0; width: 200px; } var xhr; ...
- jquery 实现邮箱输入自动提示功能:(二)
上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能,发现还有一个不错的自动提示插件: 先展示结果如图: html代码: <center> <h1>输入邮箱试试!< ...
- jquery 实现邮箱输入自动提示功能:(一)
记得去年做某个项目的时候,用到了邮箱输入自动提示功能,于是网上搜了一下,发现了这个写得不错,现在回想起来,转载一下,方便查阅. 邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作 ...
- jQuery 下拉框输入匹配提示选项
做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示
- input输入样式,动画
模板描述:input输入样式 动画,有输入框也有搜索框的样式,多种多样,大家根据自己的喜欢来. 找网站SEO教程,网站模板,以及想要建立个人博客的朋友来涂志海个人博客网,这里有你想要的一切(万一没有的 ...
- input输入子系统
一.什么是input输入子系统? 1.Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的输入信 ...
- 限制input输入类型(多种方法实现)
1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste= ...
- 限制Input输入类型的常见代码集合
搜集整理常见的限制INPUT输入类型的实现方式: 1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g ...
随机推荐
- Druid时序数据库常见问题及处理方式
最近将Druid-0.10.0升级到Druid-0.12.1的过程中遇到一些问题,为了后期方便分析问题和及时解决问题,特此写这篇文章将工作中遇到的Druid问题及解决办法记录下来,以供其他人借鉴,其中 ...
- Django调试models输出的SQL语句
django1.3在shell下,调试models变得更为简单了,不用像之前的版本,手工去调用django query,才能打印出之前的代码是执行的什么SQL语句. 1.3开始只需在settings. ...
- python语法图
- 云计算之路-阿里云上:受够了OCS,改用ECS+Couchbase跑缓存
当今天早上在日志中发现这样的错误之后,对阿里云OCS(mecached缓存服务)的积怨倾泻而出. 2014-06-08 07:15:56,078 [ERROR] Enyim.Caching.Memca ...
- 25、react入门教程
0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一个为数据提供渲染HTML视图的开源JavaScript库. 它由FaceBook.Inst ...
- svn 用cmd命令行启动服务
部署好svn 服务器后,用cmd命令行 svnserve -d -r [仓库地址] 启动服务,这样别的用户可以通过网络访问svn服务器了.
- python xlrd处理表格常用方法
1.导入模块import xlrd2.打开Excel文件读取数据data = xlrd.open_workbook('excelFile.xls')3.使用技巧获取一个工作表 table = data ...
- 功能规格说明书Version2
此功能规格说明书是Week8 功能规格说明书的第二个版本, 版本1地址:http://www.cnblogs.com/Z-XML/p/3407687.html 此功能规格说明书是面向用户的,所以作者将 ...
- 什么是http?
http请求流程: http课程链接:http://www.imooc.com/video/6712/0
- Linux建立FTP服务器
http://blog.chinaunix.net/uid-20541719-id-1931116.html http://www.cnblogs.com/hnrainll/archive/2011/ ...