當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

常用JS代码集

發布時間：2025/7/14 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了常用JS代码集小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

　　ENTER鍵可以讓光標移到下一個輸入框?

<input?οnkeydοwn="if(event.keyCode==13)event.keyCode=9"?>

　　只能是中文

<input?οnkeyup="value=value.replace(/[?-~]/g,'')"?οnkeydοwn="if(event.keyCode==13)event.keyCode=9">

　　只能是英文和數字.屏蔽了輸入法

<input?style="ime-mode:disabled"?οnkeydοwn="if(event.keyCode==13)event.keyCode=9">

　　只能輸入英文和數字

<input?οnkeyup="value=value.replace(/[\W]/g,'')?"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"?οnkeydοwn="if(event.keyCode==13)event.keyCode=9">

　　只能是數字

<input?οnkeyup="value=value.replace(/[^\d]/g,'')?"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">

　　只能顯示，不能修改的文本框

<input?readOnly?value="只能顯示，不能修改">

　　只能是數字,判斷按鍵?代碼如下:

　　附：獲取鍵盤的KeyCode

<html>
<head>
<script?language="javascript">
??ns4?=?(document.layers)???true?:?false;
??ie4?=?(document.all)???true?:?false;
function?keyDown(e){
??if(ns4){
??var?nkey=e.which;
??var?iekey='現在是ns瀏覽器';
??var?realkey=String.fromCharCode(e.which);
}
??if(ie4){
??var?iekey=event.keyCode;
??var?nkey='現在是ie瀏覽器';
??var?realkey=String.fromCharCode(event.keyCode);
??if(event.keyCode==32){realkey='\'?空格\''}
??if(event.keyCode==13){realkey='\'?回車\''}
??if(event.keyCode==27){realkey='\'?Esc\''}
??if(event.keyCode==16){realkey='\'?Shift\''}
??if(event.keyCode==17){realkey='\'?Ctrl\''}
??if(event.keyCode==18){realkey='\'?Alt\''}
}
??alert('ns瀏覽器中鍵值:'+nkey+'\n'+'ie瀏覽器中鍵值:'+iekey+'\n'+'實際鍵為'+realkey);
}
document.onkeydown?=?keyDown;
if(ns4){
document.captureEvents(Event.KEYDOWN);}
</script>
</head>
<body>
//Javascript?Document.
<hr>
<center>
<h3>請按任意一個鍵。。。。</h3>
</center>
</body>
</html>

　　限制網頁用鍵盤

<body?οnkeydοwn="alert('禁用');return?false;">

　　限制鍵盤的某個鍵：

<body?οnkeydοwn="if(event.keyCode==num){alert('禁用');return?false;}>

　　再加個找按鍵的值

　　只能是IP地址

<html>

<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
<meta?name="GENERATOR"?content="Microsoft?FrontPage?4.0">
<meta?name="ProgId"?content="FrontPage.Editor.Document">
<style>
.a3{width:30;border:0;text-align:center}
</style>
<script>
function?mask(obj){
obj.value=obj.value.replace(/[^\d]/g,'')
key1=event.keyCode
if?(key1==37?||?key1==39)
{?obj.blur();
nextip=parseInt(obj.name.substr(2,1))
nextip=key1==37?nextip-1:nextip+1;
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval("ip"+nextip+".focus()")
}?
if(obj.value.length>=3)?
if(parseInt(obj.value)>=256?||?parseInt(obj.value)<=0)
{
alert(parseInt(obj.value)+"IP地址錯誤！")
obj.value=""
obj.focus()
return?false;
}
else?
{?obj.blur();
nextip=parseInt(obj.name.substr(2,1))+1
nextip=nextip>=5?1:nextip
nextip=nextip<=0?4:nextip
eval("ip"+nextip+".focus()")
}
}
function?mask_c(obj)
{
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))
}

</script>
<title>IP地址輸入</title>

</head>
<body>IP地址輸入
<div?style="border-width:1;border-color:balck;border-style:solid;width:165;font-size:9pt">
<input?type=text?name=ip1?maxlength=3?class=a3?οnkeyup="mask(this)"?onbeforepaste=mask_c()>.
<input?type=text?name=ip2?maxlength=3?class=a3?οnkeyup="mask(this)"?onbeforepaste=mask_c()>.
<input?type=text?name=ip3?maxlength=3?class=a3?οnkeyup="mask(this)"?onbeforepaste=mask_c()>.
<input?type=text?name=ip4?maxlength=3?class=a3?οnkeyup="mask(this)"?onbeforepaste=mask_c()>
</div>
</body>

</html>

　　用#default#savehistory防止后退清空text文本框：?

<HTML>
<HEAD>
<META?NAME="save"?CONTENT="history">
<STYLE>
??.saveHistory?{behavior:url(#default#savehistory);}
</STYLE>
</HEAD>
<BODY>
<INPUT?class=saveHistory?type=text?id=oPersistInput>
<input?type=button?οnclick='javascript:location.href="http://www.webjx.com/"'?value='點擊進入,再按后退鍵試試？'>
</BODY>
</HTML>

　　TEXTAREA自適應文字行數的多少

<textarea?rows=1?name=s1?cols=27?onpropertychange="this.style.posHeight=this.scrollHeight">?

　　上傳預覽圖片

<img?id=pic??src=http://www.webjx.com/images/logo.gif>
<input?type=file?name=file><input?type=button?οnclick=pic.src=file.value?value=預覽圖片>
<input?type=button?οnclick=alert(file.value)?value=圖片地址>
<input?type=button?οnclick="file.outerHTML=file.outerHTML.replace(/value=\w/g,'')"?value="清除file里字">

　　去掉下拉選項的邊框

<div?style="position:?absolute;?left:?10px;?top:?10px;?width:?115px;?height:?20px;??clip:rect(2?114?20?2);">?
???<select>
????<option?>cnpeople</option>
????<option?>cnrose</option>
???<option?>cnbruce</option>??
??</select>
??</font>
</div>

　　下拉列表打開窗口

<select??onChange="if(this.selectedIndex?&&?this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
<option?selected>更多鏈接……</option>
<option?value="http://www.cnbruce.com">cnbruce</option>
<option?value="http://daonet.myrice.com/old/">daonet</option>
<option?value="http://www.blueidea.com">blue!dea
</select>

　　TAB的顯示

????switch?(event.keyCode)
????{
????????case?(8)????:
????????????if?(!(sel.getClientRects().length?>?1))
????????????{
????????????????event.returnValue?=?true
????????????????return
????????????}
????????????code?=?sel.text
????????????tmp?=?sel.duplicate()
????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????sel.setEndPoint("startToStart",?tmp)
????????????sel.text?=?sel.text.replace(/^\t/gm,?"")
????????????code?=?code.replace(/^\t/gm,?"").replace(/\r\n/g,?"\r")
????????????r.findText(code)
????????????r.select()
????????????break
????????case?(9)????:
????????????if?(sel.getClientRects().length?>?1)
????????????{
????????????????code?=?sel.text
????????????????tmp?=?sel.duplicate()
????????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????????sel.setEndPoint("startToStart",?tmp)
????????????????sel.text?=?"\t"+sel.text.replace(/\r\n/g,?"\r\t")
????????????????code?=?code.replace(/\r\n/g,?"\r\t")
????????????????r.findText(code)
????????????????r.select()
????????????}
????????????else
????????????{
????????????????sel.text?=?"\t"
????????????????sel.select()
????????????}
????????????break
????????case?(13)????:
????????????tmp?=?sel.duplicate()
????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????tmp.setEndPoint("endToEnd",?sel)

????????????for?(var?i=0;?tmp.text.match(/^[\t]+/g)?&&?i<tmp.text.match(/^[\t]+/g)[0].length;?i++)????tabs?+=?"\t"
????????????sel.text?=?"\r\n"+tabs
????????????sel.select()
????????????break
????????default????????:
????????????event.returnValue?=?true
????????????break
????}
}
</script>

<textarea??cols=75??rows=20??οnkeydοwn="editTab()">
<script>
alert("ok")
</script>
</textarea>

　　文本框的上/下拉

<form?name="cnbruce">
<textarea?name="com">
</textarea>
</form>
<SPAN?title='放大輸入框'?style='FONT-SIZE:?12px;?CURSOR:?hand'??οnclick=document.cnbruce.com.rows+=4>向下</SPAN>
?<SPAN?title='縮小輸入框'?style='FONT-SIZE:?12px;?CURSOR:?hand'?class='arrow'?οnclick='if(document.cnbruce.com.rows>=4)document.cnbruce.com.rows-=4;else?return?false'>向上</SPAN>

　　一個復選框，點擊之后一組復選框全部都選上

<input?type="checkbox"?name="checkA"?onpropertychange="for(i=0;i<A.children.length;i++){A.children[i].checked=this.checked}">a
<br>
<span?id="A">
<input?type="checkbox"?name="A1">
<input?type="checkbox"?name="A2">
<input?type="checkbox"?name="A3">
</span>

Debug?Textarea：在線寫?js?腳本的時候，用來即時查錯的東西！

<HTML>
<HEAD>
<TITLE>Debug?Textarea</TITLE>
<meta?http-equiv='Content-Type'?content='text/html;?charset=gb2312'>
</HEAD>
<style>
*?{
????font-size:?12px
}
body?{
????margin:?10px;?padding:?0px
}
table.list{
????cursor:?default;
????border:1px?solid?#cccccc
????background-color:?#cccccc;
????border-collapse:?collapse;
????border-Color:?#cccccc;
}
</style>
<script?language="javascript">
//?Coded?by?windy_sk?<windy_sk@126.com>?20040205

function?reportError(msg,url,line)?{
????var?str?=?"You?have?found?an?error?as?below:?\n\n";
????str?+=?"Err:?"?+?msg?+?"?on?line:?"?+?line;
????alert(str);
????return?true;
}

window.onerror?=?reportError;

function?show_ln(){
????var?txt_ln?????=?document.getElementById('txt_ln');
????var?txt_main?????=?document.getElementById('txt_main');
????txt_ln.scrollTop?=?txt_main.scrollTop;
????while(txt_ln.scrollTop?!=?txt_main.scrollTop)?{
????????txt_ln.value?+=?(i++)?+?'\n';
????????txt_ln.scrollTop?=?txt_main.scrollTop;
????}
????return;
}

function?editTab(){
????var?code,?sel,?tmp,?r
????var?tabs=''
????event.returnValue?=?false
????sel?=event.srcElement.document.selection.createRange()
????r?=?event.srcElement.createTextRange()

????switch?(event.keyCode){
????????case?(8)????:
????????????if?(!(sel.getClientRects().length?>?1)){
????????????????event.returnValue?=?true
????????????????return
????????????}
????????????code?=?sel.text
????????????tmp?=?sel.duplicate()
????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????//?出錯檢驗代碼~~~~~~
????????????if(sel.parentElement()?!=?tmp.parentElement())?return;
????????????sel.setEndPoint('startToStart',?tmp)
????????????sel.text?=?sel.text.replace(/^\t/gm,?'')
????????????code?=?code.replace(/^\t/gm,?'').replace(/\r\n/g,?'\r')
????????????r.findText(code)
????????????r.select()
????????????break
????????case?(9)????:
????????????if?(sel.getClientRects().length?>?1){
????????????????code?=?sel.text
????????????????tmp?=?sel.duplicate()
????????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????????//?出錯檢驗代碼~~~~~~
????????????????if(sel.parentElement()?!=?tmp.parentElement())?return;
????????????????sel.setEndPoint('startToStart',?tmp)
????????????????sel.text?=?'\t'+sel.text.replace(/\r\n/g,?'\r\t')
????????????????code?=?code.replace(/\r\n/g,?'\r\t')
????????????????r.findText(code)
????????????????r.select()
????????????}else{
????????????????sel.text?=?'\t'
????????????????sel.select()
????????????}
????????????break
????????case?(13)????:
????????????tmp?=?sel.duplicate()
????????????tmp.moveToPoint(r.getBoundingClientRect().left,?sel.getClientRects()[0].top)
????????????//?出錯檢驗代碼~~~~~~
????????????if(sel.parentElement()?!=?tmp.parentElement())?return;
????????????tmp.setEndPoint('endToEnd',?sel)
????????????for?(var?i=0;?tmp.text.match(/^[\t]+/g)?&&?i<tmp.text.match(/^[\t]+/g)[0].length;?i++)????tabs?+=?'\t'
????????????sel.text?=?'\r\n'+tabs
????????????sel.select()
????????????break
????????default????????:
????????????event.returnValue?=?true
????????????break;
????}
????return;
}

function?runcode()?{
????var?str?=?document.getElementById("txt_main").value;
????var?code_win?=?window.open('about:blank');
????code_win.document.open();
????code_win.document.writeln("<script>");
????code_win.document.writeln("function?reportError(msg,url,line){\nline-=14;\nvar?str='You?have?found?an?error?as?below:?\\n\\n';\nstr+='Err:?'+msg+'?on?line:?'+(line);\nalert(str);\nopener.goto(line);\nopener.focus();\nwindow.οnerrοr=null;\nsetTimeout('self.close()',10);\nreturn?true;\n}");
????code_win.document.writeln("window.onerror?=?reportError;");
????code_win.document.writeln("<\/script>");
????code_win.document.writeln(str);
????code_win.document.close();
????return;
}

function?savecode()?{
????var?str?=?document.getElementById("txt_main").value;
????var?code_win?=?window.open('about:blank','_blank','top=10000');
????code_win.document.open();
????code_win.document.writeln(str);
????code_win.document.close();
????code_win.document.execCommand('saveas','','code.html');
????code_win.close();
????return;
}

function?goto(ln)?{
????if(!/^\d+$/.test(ln))?return;
????var?obj?=?document.getElementById("txt_main");
????var?rng?=?obj.createTextRange();
????var?arr?=?obj.value.replace(/\r/,?"").split(/\n/);
????if(ln>arr.length)?ln?=?arr.length;
????var?str_tmp?=?"";
????for(var?i=0;?i<ln-1;?i++)?{
????????str_tmp?+=?arr[i];
????}
????rng.moveStart('character',str_tmp.length+1);
????str_tmp?=?"";
????for(i=ln;?i<arr.length;?i++)?{
????????str_tmp?+=?arr[i];
????}
????rng.moveEnd('character',-str_tmp.length);?
????rng.select();
????return;
}

window.onload?=?function()?{document.getElementById("txt_main").value?=?"<script>\nalert(')\n<\/script>";}
</script>
<BODY>
<table?width='600'?class='list'?border='1'?bgcolor='#eeeeee'?bordercolorlight='#000000'?bordercolordark='#FFFFFF'?cellpadding='0'?cellspacing='0'>
??<tr?bgcolor='#cccccc'>?
????<td?colspan='2'?height='20'?align='center'><b>Debug?Textarea</b></td>
??</tr>
??<tr>?
????<td?colspan='2'>
????????<table?width='95%'?border='0'?align='center'?>
??????<tr>?
????????<td?align='center'><br?/>
??????????<textarea?id='txt_ln'?name='content'?rows='10'?style='width:40px;overflow:hidden;height:200px;border-right:0px;text-align:right;line-height:14px'?onselectstart='this.nextSibling.focus();return?false'?readonly></textarea><textarea?id='txt_main'?name='content'?rows='10'?cols='80'?οnkeydοwn='editTab()'?οnkeyup='show_ln()'?οnscrοll='show_ln()'?wrap='off'?style='overflow:auto;height:200px;padding-left:5px;border-left:0px;line-height:14px'></textarea>
??????????<script>for(var?i=1;?i<=20;?i++)?document.getElementById('txt_ln').value?+=?i?+?'\n';</script>
????????</td>
??????</tr>
??????????<tr>?
????????????<td?align='center'><br?/>
??????????????<input?type='button'?value='?運?行?'?οnclick='runcode()'?accesskey='r'>  
??????????????<input?type='button'?value='?保?存?'?οnclick='savecode()'?accesskey='s'>  
??????????????<input?type='button'?value='?跳?轉?'?οnclick="goto(prompt('Please?input?the?line?number',?'1'))"??accesskey='g'>  
????????????</td>
??????????</tr>
????????</table>
????</td>
??</tr>
</table>
</BODY>
</HTML>

　　獲取input的非value值，而是顯示文本值

<select?name="sss"?onChange="alert(this.options[this.selectedIndex].text)">
<option?value="1">asdf</option>
<option?value="2">bbbb</option>
<option?value="3">ccc</option>
</select>

http://17130.ezhu.com/17130/post/75809/

總結

以上是生活随笔為你收集整理的常用JS代码集的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：探讨ASP.NET2.0的Web控件改进
下一篇：再谈无边框窗体的操作