表单(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保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS使用正则表达式除去字符串中重复字符的方法
Nov 05 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
深入理解vue中的$set
Jun 01 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
js实现拖拽与碰撞检测
Sep 18 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
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
js省市区级联查询(插件版&amp;无插件版)
2017/03/21 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
python 获取字符串MD5值方法
2018/05/29 Python
python 字典 按key值大小 倒序取值的实例
2018/07/06 Python
python实现定时发送qq消息
2019/01/18 Python
Python类的继承、多态及获取对象信息操作详解
2019/02/28 Python
PHP面试题附答案
2015/11/28 面试题
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
中专自我鉴定范文
2013/10/16 职场文书
主治医师岗位职责
2013/12/10 职场文书
应用化学专业职业生涯规划书
2014/01/22 职场文书
认识深刻的检讨书
2014/02/16 职场文书
酒店前台岗位职责
2015/04/16 职场文书
公司管理建议书
2015/09/14 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android