编程 Javascript

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>

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

- Author -

mdxy-dxy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

在Javascript里访问SharePoint列表数据的实现方法

May 22 Javascript

用Jquery选择器计算table中的某一列某一行的合计

Aug 13 Javascript

iframe里使用JavaScript控制主页转向的方法

Apr 03 Javascript

如何通过js实现图片预览功能【附实例代码】

Mar 30 Javascript

JS实现关闭当前页而不弹出提示框的方法

Jun 22 Javascript

基于js对象,操作属性、方法详解

Aug 11 Javascript

Bootstrap基本样式学习笔记之标签(5)

Dec 07 Javascript

性能优化之代码优化页面加载速度

Mar 01 Javascript

深入理解在JS中通过四种设置事件处理程序的方法

Mar 02 Javascript

vue2+el-menu实现路由跳转及当前项的设置方法实例

Nov 07 Javascript

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

Jul 15 Javascript

mpvue微信小程序开发之实现一个弹幕评论

Nov 24 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