欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

表单(FORM)的一些实用效果代码

程序员文章站 2022-06-29 09:10:19
限定只能是写限定的东西的代码 enter键可以让光标移到下一个输入框 : 
限定只能是写限定的东西的代码
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="//www.jb51.net";>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="//www.jb51.net"; 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>