表单(FORM)的一些实用效果代码


Posted in Javascript onMarch 25, 2007

限定只能是写限定的东西的代码
ENTER键可以让光标移到下一个输入框 : <input onkeydown="if(event.keyCode==13)event.keyCode=9" > <br>
只能是中文:<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能是英文和数字.屏蔽了输入法:<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能输入英文和数字:<input onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" onkeydown="if(event.keyCode==13)event.keyCode=9"> <br>
只能是数字<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"><br>
只能显示,不能修改的文本框<input readOnly value="只能显示,不能修改">
input中只能输入数字在提交时提示
<script  language=javascript>
function  onlyNum()
{
if(!((event.keyCode>=48&&event.keyCode<=57)||(event.keyCode>=96&&event.keyCode<=105)||(event.keyCode==8)))
event.returnValue=false;
}
</script>
<input  onkeydown="onlyNum();">  
下拉列表打开窗口选择连接时弹出一个新窗口
<select  onChange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
<option selected>更多链接……</option>
<option value="https://3water.com";>cnbruce</option>
<option value="http://www.21west.net";>daonet</option>
<option value="http://www.blueidea.com";>blue!dea
</select> 
一个复选框,点击之后一组复选框全部都选上
<input type="checkbox" name="checkA" onpropertychange="for(i=0;i<A.children.length;i++){A.children.checked=this.checked}">a
<br>
<span id="A">
<input type="checkbox" name="A1">
<input type="checkbox" name="A2">
<input type="checkbox" name="A3">
</span> 
select里的option进行分类列表
<span style="position:absolute;border:1px inset #d3d6d9"><select style="margin:-2px; width:200px">
<option selected>------------请选择------------</option>
<optgroup label="JavaScript&VBScript区">
 <option>原   创
 <option>经   典
<optgroup label="后台区">
 <option>asp&sql
 <option>php&mysql
</select></span> 
提示限制输入的字符数
<script language="JavaScript">
<!--
function SymError()
{
  return true;
}
window.onerror = SymError;
function strlength(str){
    var l=str.length;
    var n=l
    for (var i=0;i<l;i++)
    {
        if (str.charCodeAt(i)<0||str.charCodeAt(i)>255) n++
    }
    return n        
}
function changebyte(value,length){
    var l=strlength(value)
    if (l<=length) {
        if (document.all!=null) document.all("byte").innerText="还可以输入"+(length-l)+"字节"
    }
    else
    {
        document.all("byte").innerText="输入字节数超出范围"
    }
    return true
}
function changebyte1(value,length){
    var l=strlength(value)
    if (l<=length) {
        if (document.all!=null) document.all("byte1").innerText="还可以输入"+(length-l)+"字节"
    }
    else
    {
        document.all("byte1").innerText="输入字节数超出范围"
    }
    return true
}
function changebyte2(value,length){
    var l=strlength(value)
    if (l<=length) {
        if (document.all!=null) document.all("byte2").innerText="还可以输入"+(length-l)+"字节"
    }
    else
    {
        document.all("byte2").innerText="输入字节数超出范围"
    }
    return true
}
</script>
<form method="post" name=test onSubmit="return checkdata()" action="">
<TEXTAREA onkeydown="return changebyte1(document.test.icqcontent.value,198)" onkeyup="return changebyte1(document.test.icqcontent.value,198)" name=icqcontent cols=40 rows="3"></TEXTAREA>
<SPAN id=byte1><SCRIPT language=JavaScript>changebyte1(document.test.icqcontent.value,198);</SCRIPT></SPAN>
</form> 
判断填写字数的限制
<script language=javascript>
function gbcount(message,total,used,remain)
{
  var max;
  max = total.value;
  if(message.value.length > max){
    message.value = message.value.substring(0,max);
    used.value = max;
    remain.value = 0;
    alert('留言不能超过规定的字数!');
  }
  else{
    used.value = message.value.length;
    remain.value = max - used.value;
  }
}
</script>
<form name='myform' >
<textarea name='GuestContent' cols='59' rows='6'    onkeydown=gbcount(this.form.GuestContent,this.form.total,this.form.used,this.form.remain); onkeyup=gbcount(this.form.GuestContent,this.form.total,this.form.used,this.form.remain);></textarea>
最多字数:<INPUT disabled maxLength=4 name=total size=3 value=20>
已用字数:<INPUT disabled maxLength=4 name=used size=3 value=0>
剩余字数:<INPUT disabled maxLength=4 name=remain size=3>
</form> 
注册阅读时间等待按钮
<form action="https://3water.com"; method="post" name="agree">
欢迎注册烟灰BLOG:
条款若干........
<input type="submit" value="请认真查看<服务条款和声明> (15)" name="agreeb">
</form>
<SCRIPT language=javascript>
<!--
var secs = 15;
document.agree.agreeb.disabled=true;
for(i=1;i<=secs;i++) {
 window.setTimeout("update(" + i + ")", i * 1000);
}
function update(num) {
 if(num == secs) {
 document.agree.agreeb.value =" 我 同 意 ";
 document.agree.agreeb.disabled=false;
 }
else {
 printnr = secs-num;
 document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
 }
}
//-->
</SCRIPT> 

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
angularJS深拷贝详解
Mar 23 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
推荐dojo学习笔记
Mar 24 #Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 #Javascript
tbody元素支持嵌套的注意方法
Mar 24 #Javascript
xml 与javascript结合的问题解决方法
Mar 24 #Javascript
用prototype实现的简单小巧的多级联动菜单
Mar 24 #Javascript
this[] 指的是什么内容 讨论
Mar 24 #Javascript
javascript对象的property和prototype是这样一种关系
Mar 24 #Javascript
You might like
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
JavaScript中Cookies的相关使用教程
2015/06/04 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python制作简易注册登录系统
2016/12/15 Python
python difflib模块示例讲解
2017/09/13 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python自动发微信监控报警
2019/09/06 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
内勤主管岗位职责
2014/04/03 职场文书
《学棋》教后反思
2014/04/14 职场文书
社区志愿者培训方案
2014/06/10 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
合作协议书模板2014
2014/09/26 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
教学督导岗位职责
2015/04/10 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技