js实现表单检测及表单提示的方法


Posted in Javascript onAugust 14, 2015

本文实例讲述了js实现表单检测及表单提示的方法。分享给大家供大家参考。具体如下:

这是个实用的表单判断以及表单提示效果,如果点击需要输入文字的时候,提示就会跑出来,提示框的形状比较个性化,有一个三角符号指向输入框,有两张图片需要下载。

运行效果如下图所示:

js实现表单检测及表单提示的方法

在线演示地址如下:

具体代码如下:

<!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">
<head>
<title>表单检测及表单提示</title>
<style type="text/css">
dl {
font:normal 12px/15px Arial;
position: relative;
width: 350px;
}
dt {
 clear: both;
 float:left;
 width: 130px;
 padding: 4px 0 2px 0;
 text-align: left;
}
dd {
 float: left;
 width: 200px;
 margin: 0 0 8px 0;
 padding-left: 6px;
}
.hint {
 display: none;
 position: absolute;
 right: -250px;
 width: 200px;
 margin-top: -4px;
 border: 1px solid #c93;
 padding: 10px 12px;
 background: #ffc url("images/pointer.gif") no-repeat -10px 5px;
}
.hint .hint-pointer {
 position: absolute;
 left: -10px;
 top: 5px;
 width: 10px;
 height: 19px;
 background: url("images/pointer.gif") left top no-repeat;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
 window.onload = func;
 } else {
 window.onload = function() {
  oldonload();
  func();
 }
 }
}
function prepareInputsForHints() {
 var inputs = document.getElementsByTagName("input");
 for (var i=0; i<inputs.length; i++){
  if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
   inputs[i].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   inputs[i].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
 var selects = document.getElementsByTagName("select");
 for (var k=0; k<selects.length; k++){
  if (selects[k].parentNode.getElementsByTagName("span")[0]) {
   selects[k].onfocus = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
   }
   selects[k].onblur = function () {
    this.parentNode.getElementsByTagName("span")[0].style.display = "none";
   }
  }
 }
}
addLoadEvent(prepareInputsForHints);
</script>
</head>
<body>
<p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p>
<dl>
 <dt>
  <label for="firstname">First Name:</label>
 </dt>
 <dd>
  <input name="firstname" id="firstname" type="text" />
  <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="lastname">Last Name:</label>
 </dt>
 <dd>
  <input name="lastname" id="lastname" type="text" />
  <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="email">Email:</label>
 </dt>
 <dd>
  <input name="email" id="email" type="text" />
  <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span>
 </dd>
 <dt><label for="year">Birth Year:</label></dt>
 <dd>
  <select id="year" name="year">
   <option value="">YYYY</option>
   <option value="1066">1066</option>
   <option value="1492">1492</option>
   <option value="1776">1776</option>
  </select>
  <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="username">Username:</label>
 </dt>
 <dd>
  <input name="username" id="username" type="text" />
  <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span>
 </dd>
 <dt>
  <label for="password">Password:</label>
 </dt>
 <dd>
  <input name="password" id="password" type="password" />
  <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span>
 </dd>
 <dt class="button"> </dt>
 <dd class="button">
  <input
   type="submit"
   class="button"
   value="Submit" />
 </dd>
</dl>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
Javascript学习笔记一 之 数据类型
Dec 15 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
JavaScript中的this关键字使用详解
Aug 14 #Javascript
JS实现双击编辑可修改状态的方法
Aug 14 #Javascript
JavaScript变量的作用域全解析
Aug 14 #Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 #Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 #Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 #Javascript
js实现人才网站职位选择功能的方法
Aug 14 #Javascript
You might like
php strtotime 函数UNIX时间戳
2009/01/14 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
小议JavaScript中Generator和Iterator的使用
2015/07/29 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
js实现登录验证码
2016/12/22 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
使用JavaScript解析URL的方法示例
2019/03/01 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
python pdb调试方法分享
2014/01/21 Python
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python使用functools实现注解同步方法
2018/02/06 Python
Python字符串对象实现原理详解
2019/07/01 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
python time()的实例用法
2020/11/03 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
报到证丢失证明
2014/01/11 职场文书
代理协议书范本
2014/04/22 职场文书
企业党建工作总结2015
2015/05/26 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Python中tqdm的使用和例子
2022/09/23 Python