表单(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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JS图片根据鼠标滚动延时加载的实例代码
Jul 13 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JavaScript的arguments对象应用示例
Sep 15 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jquery ui resizable bug解决方法
2010/10/26 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python实现随机梯度下降法
2020/03/24 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Python 使用type来定义类的实现
2019/11/19 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
军训自我鉴定
2013/12/14 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
同学聚会主持词
2014/03/18 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers