表单(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实现的倒计时按钮实例
Jun 24 Javascript
javascript实现一个数值加法函数
Jun 26 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
Node.js 中exports 和 module.exports 的区别
Mar 14 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
PHP 502bad gateway原因及解决方案
Nov 13 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 读取文件的正确方法
2009/04/29 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python的形参和实参使用方式
2019/12/24 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
大学生求职自我评价
2014/01/16 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
欢度春节标语
2014/07/01 职场文书
单位车辆管理制度
2015/08/05 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS