表单(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>
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>
上一篇: JS 单击连接保存图片的函数
下一篇: 用JavaScript显示随机图像或引用