表单(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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
微信小程序 PHP生成带参数二维码
Feb 21 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
vue实现将一个数组内的相同数据进行合并
Nov 07 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
微信小程序实现页面浮动导航
Jan 08 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创建PowerPoint2007文档的方法
2015/12/10 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python 元类使用说明
2009/12/18 Python
全面解读Python Web开发框架Django
2014/06/30 Python
Python进程间通信Queue实例解析
2018/01/25 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
python单例模式的多种实现方法
2019/07/26 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
美国珠宝店:Helzberg Diamonds
2018/10/24 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
电子信息工程专业推荐信
2014/02/14 职场文书
文秘求职信范文
2014/04/10 职场文书
《学会看病》教学反思
2016/02/17 职场文书
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
windows server 2016 域环境搭建的方法步骤(图文)
2022/06/25 Servers