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 相关文章推荐
学习ExtJS Window常用方法
Oct 07 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
WebPack配置vue多页面的技巧
May 15 Javascript
Vue头像处理方案小结
Jul 26 Javascript
Vue-Router的使用方法
Sep 05 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
Sep 24 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
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
咖啡的种类和口感
2021/03/03 新手入门
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
详解Python Socket网络编程
2016/01/05 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python匿名函数用法实例分析
2019/08/03 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
追悼会子女答谢词
2014/01/28 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书