您当前的位置: 首页 > 网站运营 > 建站经验 > 仿制百度知道倒计数留言簿

仿制百度知道倒计数留言簿

作者:不详 来源:网络 发布时间: 2011-10-28 18:56 点击:
我们平常浏览一些门户网站的时候,会发现门户网站的一些留言簿设计的很有特色,有精准的指定访客输入多少字符到文本框内,文本框后还会有统计的倒计数字,当你输入的文字超过了指定的文字时,就不会再显示。有些文本框还指定了访客只能输入中文或是数字,当你输入了其

仿制百度知道倒计数留言簿

  我们平常浏览一些门户网站的时候,会发现门户网站的一些留言簿设计的很有特色,有精准的指定访客输入多少字符到文本框内,文本框后还会有统计的倒计数字,当你输入的文字超过了指定的文字时,就不会再显示。有些文本框还指定了访客只能输入中文或是数字,当你输入了其它的字符时,你会发现你不管怎样输入就是输入不进去,会出现莫明其妙的消失。当你输入指定的文字或者数字时它又会照常显示,这是不是很神奇呢!其实这是通过正则表达式和JS代码一起实现的效果。你不懂正则表达式也没有关系,其实你只要知道这句代码是做什么的就行了。
  
  如果感兴趣的朋友可到www.zzxyss.cn先看一下效果在版权的最底部,我们公司是做颈椎病枕头的,是我开发的我们公司的一个网站用Dreamweaver+asp来实现的这种效果,我也是研究半天才弄上的。只不过公司的我没加入禁止粘入功能,呵呵!不说废话了,那么马上开始跟者周口seo小谢一起来实现这些个效果吧!其实只有下面的这些个代码在html里就能实现,如果你是动态网站你接合数据库就行了,下面我就给出这些代码,并说明是做什么用的。
  
  首先在<head></head>中加入这代码,代码的意思禁止粘入文本框内容!
  
  <script type="text/javascript">
  
  //not IE is required
  
  function fncKeyStop(evt)
  
  {
  
  if(!window.event)
  
  {
  
  var keycode=evt.keyCode;
  
  var key=String.fromCharCode(keycode).toLowerCase();
  
  if(evt.ctrlKey&&key=="v")
  
  {
  
  evt.preventDefault();
  
  evt.stopPropagation();
  
  }
  
  }
  
  }
  
  </script>
  
  这下面就是主要的文本框和JSwa
  
  <p><span class="bai">收</span>联系人:<input name="xy_lxr" type="text" class="yby" id="xy_lxr" onKeyUp="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"/>/*这句正则的意思是说只能输入中文*/
  
  <span>*</span>必填项只限中文</p>
  
  <p>联系电话:<input name="xy_lxdh" type="text" class="yby" id="xy_lxdh" onKeyUp="this.value=this.value.replace(/\D/g,'')" onbafterpaste="this.value=this.value.replace(/\D/g,'')" onkeydown="fncKeyStop(event)" onpaste="return false" oncontextmenu="return false;"/>
  
  /*onKeyUp="this.value=this.value.replace(/\D/g,'')" onbafterpaste="this.value=this.value.replace(/\D/g,'')"这句正则的意思是说只能输入数字,onkeydown="fncKeyStop(event)" onpaste="return false" oncontextmenu="return false;"的意思JS验证我们在hrad中的JS代码!你可以在下面的文本框中都加上这句JS验证禁止粘入代码,我就不加了*/
  
  <span>*</span>必填项只限数字</p>
  
  <p>收货地址:<input name="xy_shdz" type="text" class="shdz" id="xy_shdz" onkeyup="checkLength(this);"/>
  
  <span>*</span>字符:25
  
  还可输:<span id="chLeft">25</span><br>
  
  <script type="text/javascript">
  
  function checkLength(which){
  
  var maxChars=25;
  
  if(which.value.length>maxChars)
  
  which.value=which.value.substring(0,maxChars);
  
  var curr=maxChars-which.value.length;
  
  document.getElementById("chLeft").innerHTML=curr.toString();
  
  }
  
  </script>
  
  /*这代码的意思是说只能输入25个字符,注意这句<span id="chLeft">25</span>和JS代码中的document.getElementById("chLeft").innerHTML=curr.toString();的id变量是相同的*/
  
  </p>
  
  其实要实现就是这么的简单,还有更多的正则表达式你自己可以搜一下。

分享到:
本文"仿制百度知道倒计数留言簿"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(0)
0%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4