html文本框提示效果的示例代码


Posted in Javascript onJune 28, 2014

完整代码如下:

<!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" xml:lang="en" lang="en">

<head>

  <title>html文本框提示效果</title>

  <style type="text/css">

  *{

  margin:0px;padding:0px;font-size:12px;

  }

    input{

      width:100px;height:20px;border:1px solid #ccc;

    }

  </style>

</head>

<body>

<script language="javascript">

function tips(id,str){

var l=document.getElementById(id).offsetLeft+120;

var t=document.getElementById(id).offsetTop;

document.getElementById("tips").innerHTML="提示:"+str;

document.getElementById("tips").style.left=l+"px";

document.getElementById("tips").style.top=t+"px";

document.getElementById("tips").style.display="";

}

function outtips(){

    document.getElementById("tips").style.display='none';

}

</script>

<div id="tips" style="position:absolute;border:1px solid #ccc;padding:0px 3px;color:#f00;display:none;height:20px;line-height:20px;background:#fcfcfc"></div>

<br />

姓名:<input type="text" id="username" onfocus="tips('username','姓名长度最多16个字符')" onblur="outtips()" />

<br />

密码:<input type="password" id="password" onfocus="tips('password','密码长度必须在3-18位之间')" onblur="outtips()" />

</body>

</html>
Javascript 相关文章推荐
基于jQuery的图片剪切插件
Aug 03 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
Dec 31 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
angular实现商品筛选功能
Feb 01 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
js实现随机抽奖
Mar 19 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 #Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 #Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 #Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 #Javascript
jQuery+ajax实现鼠标单击修改内容的方法
Jun 27 #Javascript
node.js实现逐行读取文件内容的代码
Jun 27 #Javascript
javascript实现的HashMap类代码
Jun 27 #Javascript
You might like
php定时计划任务的实现方法详解
2013/06/06 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
php提取微信账单的有效信息
2018/10/01 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
vue2.0自定义指令示例代码详解
2019/04/25 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python解析xml文件实例分享
2013/12/04 Python
python实现dict版图遍历示例
2014/02/19 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python和c语言的主要区别总结
2019/07/07 Python
python em算法的实现
2020/10/03 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
中间件的定义
2016/08/09 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
安全宣传标语
2014/06/10 职场文书
八项规定对照检查材料
2014/08/31 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis