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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
Vue实现动态查询规则生成组件
May 27 Vue.js
使用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/13 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
JavaScript 指导方针
2007/04/05 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
用js模拟JQuery的show与hide动画函数代码
2010/09/20 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
AngularJS基础 ng-value 指令简单示例
2016/08/03 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python创建系统目录的方法
2015/03/11 Python
Python中的super用法详解
2015/05/28 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
园林系毕业生求职信
2014/06/23 职场文书
员工团队活动方案
2014/08/28 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸