表单(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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
自己动手手写jQuery插件总结
Jan 20 Javascript
详解javascript函数的参数
Nov 10 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
Dec 20 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
react中的DOM操作实现
Jun 30 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获取金书网的书名的实现代码
2010/06/11 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
php伪静态之APACHE篇
2014/06/02 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
php判断当前操作系统类型
2015/10/28 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
详解JavaScript对象和数组
2015/12/03 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
js运算符的一些特殊用法
2018/07/29 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
SQL语言面试题
2013/08/27 面试题
如何开启linux的ssh服务
2013/06/03 面试题
学前教育专业毕业生自荐信
2013/10/03 职场文书
工作评语大全
2014/04/26 职场文书
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python