html文本框提示效果的示例代码
更新时间：2014年06月28日 22:56:30 投稿：mdxy-dxy
在html文本框中显示提示效果，以方便用户的输入，比如在输入姓名时，会自动提示 姓名长度最多16个字符，是不是很酷哦。快来看看吧
完整代码如下：
复制代码 代码如下:
<!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模板引擎mustache.js，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了Bootstrap组合上、下拉框的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了javascript中的属性定义方法知识点，对属性定义方法的基本使用方法，以及各种方法进行整理，感兴趣的小伙伴们可以参考一下2015-11-11
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
本文给大家简单总结了下JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法，非常的简单实用，有需要的小伙伴可以参考下2016-06-06
javascript轻量级库createjs使用Easel实现拖拽效果
这篇文章主要介绍了javascript轻量级库createjs使用Easel实现拖拽效果的相关资料,需要的朋友可以参考下2016-02-02
javascript 中iframe高度自适应（同域）实例详解
这篇文章主要介绍了javascript 中iframe高度自适应（同域）实现代码的相关资料,需要的朋友可以参考下2017-05-05
如何写JavaScript才能逼格更高呢？怎样才能、让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢？下面列出一些在JavaScript时的装逼技巧，也可说是非常实用的写法2020-05-05![JS实现留言板功能[楼层效果展示]](//img.jbzj.com/images/xgimg/bcimg7.png)
小编最近在基于js实现留言板功能，实现的功能有发布人和发布内容做非空校验，楼层效果展示和发布时间展示。具体实例代码大家参考下本文2017-12-12
这篇文章主要给大家介绍了关于ES6中字符串的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了JavaScript如何利用油猴脚本实现去水印功能，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-03-03
![JS实现留言板功能[楼层效果展示]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论