表單(FORM)的一些實用效果代碼
2019-11-21 02:11:20
供稿：網友
限定只能是寫限定的東西的代碼
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="http://m.survivalescaperooms.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="http://m.survivalescaperooms.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>
