表单(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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
tangram框架响应式加载图片方法
Nov 21 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
web前端vue之CSS过渡效果示例
Jan 10 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
Angular开发者指南之入门介绍
2017/03/05 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
pycham查看程序执行的时间方法
2018/11/29 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
一年级数学教学反思
2014/02/01 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
倡导文明标语
2014/06/16 职场文书
应聘教师求职信
2014/07/19 职场文书
学生上课说话检讨书
2014/10/25 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
golang 语言中错误处理机制
2021/08/30 Golang
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
MySql数据库触发器使用教程
2022/06/01 MySQL