表单(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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
javascript 终止函数执行操作
Feb 14 Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
JS实现复制功能
Mar 01 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
JavaScript中var的重要性实例分析
Jul 09 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
php自动获取目录下的模板的代码
2010/08/08 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jQuery实现导航回弹效果
2017/02/27 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
超简单的Python HTTP服务
2019/07/22 Python
python反转列表的三种方式解析
2019/11/08 Python
python实现简单井字棋游戏
2020/03/04 Python
python中sys模块是做什么用的
2020/08/16 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
应届大学生简历中的自我评价
2014/01/15 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
社区植树节活动总结
2015/02/06 职场文书
会计工作态度自我评价
2015/03/06 职场文书
驻村工作简报
2015/07/20 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书