表单(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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
javascript模拟实现ajax加载框实例
Oct 15 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
ECMAScript6--解构
Mar 30 Javascript
React.js中常用的ES6写法总结(推荐)
May 09 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
JavaScript弹出对话框的三种方式
2016/03/23 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python装饰器decorator用法实例
2014/11/10 Python
python简单验证码识别的实现方法
2019/05/10 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
大四学年自我鉴定
2013/11/13 职场文书
中小学生学籍证明
2014/10/25 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
师德师风个人总结
2015/02/06 职场文书
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android