/*
此项目由cssrain发起,群里的朋友完善。
收集了项目中常用的js函数和封装代码。
为项目提供方便。希望能在项目中发挥作用。
v1.0 2008.06.03
v1.1 2008.06.04
v1.2 2008.06.05
v1.3 2008.06.05
v1.4 2008.06.06
v1.5 2008.06.08
v1.6 2008.06.15
v1.7 2008.06.16
v1.8 2008.06.17
v1.9 2008.06.18
v2.0 2008.06.19
如果你也有好的函数和封装代码,可以给我联系.
email : cssrain@gmail.com
一起完善这个js。
*/
/**************
简化document.getElementById
用法:
$id("d").innerHTML;
(HTMLcode:<div id="d">cssrain</div>)
**************/
function $id(id) {
return document.getElementById(id);
}
/**************
函数:getElementsByClassName
使用方法:
获取document内的超链接class是“info-links”的。
getElementsByClassName(document, "a", "info-links");
获取container内的div的class是col的.
getElementsByClassName(document.getElementById("container"), "div", "col");
获取document内的所有class是“click-me”的。
getElementsByClassName(document, "*", "click-me");
例子:
HTML code:
<a class="a">ccc</a>
<a class="info-links">aaa</a>
<a class="info-links">bbb</a>
<br/><br/>
<div class="co">dddd</div>
<div class="col">dddd</div>
<div id="container">
<div class="co">dddd</div>
<div class="col">dddd</div>
<div class="co">dddd</div>
<div class="col">dddd</div>
<a class="a">ccc</a>
</div>
JS code:
test 1 :
var a = getElementsByClassName(document,"a","info-links");
alert(a[0].innerHTML +"?? "+a[1].innerHTML);
for(var i=0;i<a.length;i++){
a[i].style.color="red";
}
//test 2 :
var b = getElementsByClassName(document.getElementById("container"), "div", "col");
for(var m=0;m<b.length;m++){
b[m].style.color="red";
}
**************/
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/-/g, "\-");
var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
?
/**************
replaceAll:
替换字符串中的字符。
用法:
yourstring.replaceAll("要替换的字符", "替换成什么");
例子:
"cssrain".replaceAll("s", "a");
"?? cs?? sr?? ai?? n".replaceAll(" ", "");
**************/
String.prototype.replaceAll = function (AFindText,ARepText){
??????????????? raRegExp = new RegExp(AFindText,"g");
??????????????? return this.replace(raRegExp,ARepText);
}
/**************
* 字符串前后空格处理。
* 如果想替换中间的空格,请用replaceAll方法。
* 用法:
* " cssrain?? ".trim();
**************/
String.prototype.trim=function()
{
????????? return this.replace(/(^\s*)|(\s*$)/g,"");//将字符串前后空格,用空字符串替代。
}
/**************
* 计算字符串的真正长度
//String有个属性length,但是它不能区分英文字符,
//计算中文字符和全角字符。但是在数据存储的时候中文和全角都是用两个字节来存储的,
//所有需要额外处理一下。自己写了个函数,返回String正真的长度.
用法:
<input type="text" name="rain" id="rain" />
<input type="button" id="test" value="test" onclick="alert( document.getElementById('rain').value.codeLength() )"/>
**************/
String.prototype.codeLength=function(){
var len=0;
if(this==null||this.length==0)
?? return 0;
var str=this.replace(/(^\s*)|(\s*$)/g,"");//去掉空格
for(i=0;i<str.length;i++)
?? if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
??? len++;
?? else
??? len+=2;
return len;
}
//JS获取字符串的实际长度,用来代替 String的length属性
String.prototype.length = function(){
??????? return this.replace.(/[\u4e00-\u9fa5]+/g,"**").length;
}
?
/**************
//编码HTML 和 解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本,可以先过滤HTML标签,过滤掉双引号,单引号,符号&,符号<,符号
用法:
<input type="text" name="rain" id="rain" />
<input type="button" value="test" onclick=" document.getElementById('rain2').value= document.getElementById('rain').value.htmlEncode() "/>
<input type="text" name="rain2" id="rain2" />
<input type="button" value="test" onclick=" document.getElementById('rain').value= document.getElementById('rain2').value.htmlDecode() "/>
**************/
String.prototype.htmlEncode=function(){
??? return this.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\"/g,""").replace(/\'/g,"'");
}
String.prototype.htmlDecode=function(){
??? return this.replace(/\&\;/g, '\&').replace(/\>\;/g, '\>').replace(/\<\;/g, '\<').replace(/\"\;/g, '\'').replace(/\&\#39\;/g, '\'');
}
/**************
用来window.load 多个函数。
window.onload是不能同时加载多个函数的;
比如:
function t(){
alert("t")
}
function b(){
alert("b")
}
window.onload =t ;
window.onload =b ;
这样做 ,只会输出 b ;
addLoadEvent()这个函数 就是解决这个问题的。
用法:
addLoadEvent(t);
addLoadEvent(b);
**************/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
??? window.onload = func;
} else {
??? window.onload = function() {
????? oldonload();
????? func();
??? }
}
}
//DOM没有提供insertAfter(),只提供了一个insertBefore()方法。
//在这里,我们自己编写一个 insertAfter().
/**************
用法:
//插入到 div?? b 的后面
window.onload=function(){
?? var a =document.createElement("span");
?? var b =document.createTextNode("cssrain");
?? a.appendChild(b);
??
?? var mubiao = document.getElementById("b");
?? insertAfter(a,mubiao);
}
<div id="b">bbbbbbbbb</div>
<div>dddddd</div>
**************/
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {// 如果最后的节点是目标元素,则直接添加。因为默认是最后
??? parent.appendChild(newElement);
} else {
??? parent.insertBefore(newElement,targetElement.nextSibling);//如果不是,则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
}
}
/**************
解决 style 外嵌样式 用js 获取不到 的问题。
用法:
window.onload = function(){
var e1 = document.getElementById("exep1");
alert(getStyle(e1,"fontSize"));
alert(getStyle(e1,"backgroundColor"));
}
<!--
currentStyle 对象返回了元素上的样式表,但是 style 对象只返回通过 STYLE 标签属性应用到元素的内嵌样式。
因此,通过 currentStyle 对象获取的样式值可能与通过 style 对象获取的样式值不同。
例如,如果段落的 color 属性值通过链接或嵌入样式表设置为红色( red ),
而不是内嵌的话,对象.currentStyle.color 将返回正确的颜色,
而对象 style.color 不能返回值。
但是,如果用户指定了 <P STYLE="color:'red'">,currentStyle 和 STYLE 对象都将返回值 red。
-->
</head>
<body>
<div id="exep1">c</div>
</body>
**************/
function getStyle(elem, name){
if(elem.style[name])
?? return elem.style[name];
else if(elem.currentStyle)//ie
?? return elem.currentStyle[name];
else if(document.defaultView && document.defaultView.getComputedStyle){//w3c
?? name = name.replace(/([A-Z])/g,"-$1");
?? name = name.toLowerCase();
??
?? var s = document.defaultView.getComputedStyle(elem,"");
?? return s && s.getPropertyValue(name);
} else
?? return null
}
/**************
//获取当前元素的 元素节点
如果想获取当前元素的下一个节点。
那么可以扩展下:
比如:
var elem = getNextElement( node.nextSibling );
用法;
var elem = getNextElement( node );
**************/
function getNextElement(node) {//获取当前元素的元素节点
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
??? return getNextElement(node.nextSibling);//如果不是,继续查询下一个,直到 if(node.nodeType == 1) .
}
return null;
}
/**************
默认的 element.className = "" ;是 替换样式。
如果我们是想追加样式, 那么使用下面的方法
用法;
addClass(element,"classname");
用了这个函数后:
那么将追加成 :
<p class=”b classname”>aaaaaaaaaaaaaaaaaaa</p>
**************/
function addClass(element,value) { //追加样式,而不是替换样式
if (!element.className) {
??? element.className = value;
} else {
??? element.className+= " ";
??? element.className+= value;
}
}
/**************
表格隔行变色。
注意:引入 我们自己写的 addClass()函数。
**************/
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
??? var odd = false;
??? var rows = tables[i].getElementsByTagName("tr");
??? for (var j=0; j<rows.length; j++) {
????? if (odd == true) {
??????? addClass(rows[j],"odd");//odd为样式名
??????? odd = false;
????? } else {
??????? odd = true;
????? }
??? }
}
}
/**************
表格滑过变色.
注意:引入 我们自己写的 addClass()函数。
**************/
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
??? rows[i].oldClassName = rows[i].className
??? rows[i].onmouseover = function() {
????? addClass(this,"highlight");//highlight为样式名
??? }
??? rows[i].onmouseout = function() {
????? this.className = this.oldClassName
??? }
}
}
?
/********************
隔行变色 + 滑过变色
参数设置:
id 为表格的id
class1为奇数行的颜色
class2为偶数行的颜色
class3为鼠标滑过颜色
用法:
sti_table("cssrain" , "c" , "a" ,"d" );
<style>
.a{
background-color : #eee;
}
.c{
background-color : #96dd33;
}
.d{
background-color : #456577;
}
</style>
<TABLE id="cssrain" >
<TR>
<TD>1</TD>
</TR>
</table>
*********************/
function sti_table( id , class1 , class2 , class3 ){
var para = document.getElementById(id);
var tr = para.getElementsByTagName("tr");
var odd = false;
for(var i=0 ; i < tr.length ; i++ ){
??????? if(odd==true){
???????? tr[i].className = class1;?????
?? odd=false;
?? tr[i].onmouseover =function(){
????? this.className = class3;
?? }
??? tr[i].onmouseout =function(){
????? this.className = class1;
?? }
?? }
?? else{
?? tr[i].className = class2;??
???????? odd=true;
??? tr[i].onmouseover =function(){
????? this.className = class3;
?? }
??? tr[i].onmouseout =function(){
????? this.className = class2;
?? }
?? }
}
}
//除法函数,用来得到精确的除法结果
//说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用:accDiv(arg1,arg2)
//返回值:arg1除以arg2的精确结果
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length}catch(e){}
try{t2=arg2.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return (r1/r2)*pow(10,t2-t1);
}
}
//给Number类型增加一个div方法
//用法: (37).div(3);
Number.prototype.div = function (arg){
return accDiv(this, arg);
}
//乘法函数,用来得到精确的乘法结果
//说明:javascript的乘法结果会有误差,在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用:accMul(arg1,arg2)
//返回值:arg1乘以arg2的精确结果
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//给Number类型增加一个mul方法
//用法: (37).mul(3);
Number.prototype.mul = function (arg){
return accMul(arg, this);
}
//加法函数,用来得到精确的加法结果
//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用:accAdd(arg1,arg2)
//返回值:arg1加上arg2的精确结果
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//给Number类型增加一个add方法
//用法: (37).add(3);
Number.prototype.add = function (arg){
return accAdd(arg,this);
}
//减法函数,用来得到精确的减法结果
function Subtr(arg1,arg2){
???? var r1,r2,m,n;
???? try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
???? try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
???? m=Math.pow(10,Math.max(r1,r2));
???? //last modify by deeka
???? //动态控制精度长度
???? n=(r1>=r2)?r1:r2;
???? return ((arg1*m-arg2*m)/m).toFixed(n);
}
//给Number类型增加一个add方法
//用法: (5.5).sub(37.5)
Number.prototype.sub = function (arg){
return Subtr(arg,this);
}
//格式化字符串
/*
用法:
var cls="redclass";
var text="My name is ";
var str='<div class="{0}">{1} {2}</div>'.diy_format(cls, text,"cssrain");
alert(str);
*/
String.prototype.diy_format=function(){
??????? var args=arguments;
??????? return this.replace(/\{(\d+)\}/g, function(m, i){
??????????????? return args[i];}
???? );}
//去掉数组中重复的元素
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.strip() );
Array.prototype.strip=function(){
if(this.length<2) return [this[0]]||[];
var arr=[];
for(var i=0;i<this.length;i++){
?? arr.push(this.splice(i--,1));
?? for(var j=0;j<this.length;j++){
??? if(this[j]==arr[arr.length-1]){
???? this.splice(j--,1);}}}
return arr;
}
?
//得到l-h下标的数组
//用法:
//var arr=["abc",85,"abc",85,8,8,1,2,5,4,7,8];
//alert( arr.limit(2,4) ); //输出 abc , 85 ,8
Array.prototype.limit = function(l, h) {
var _a = this; var ret = [];
l = l<0?0:l; h = h>_a.length?_a.length:h;
for (var i=0; i<_a.length; i++) {
if (i>=l && i<=h) ret[ret.length] = _a[i];
if (i>h) break;
}; return ret;
}
?
//获取某月有几天 ,月份是从 0开始
//用法:alert( jscomGetMonthDays(2008 , 4)?? )
function jscomGetMonthDays(year,month)
{
if(month<0 || month>11)
{
?? return 30;
}
var arrMon = new Array(12);
arrMon[0] = 31;
if(year % 4 == 0)
{
?? arrMon[ 1] =29;
}else{
?? arrMon[ 1] =28;
}
arrMon[ 2] = 31; arrMon[ 3] = 30;
arrMon[ 4] = 31; arrMon[ 5] = 30;
arrMon[ 6] = 31; arrMon[ 7] = 31;
arrMon[ 8] = 30; arrMon[ 9] = 31;
arrMon[10] = 30; arrMon[11] = 31;
return arrMon[month];
}
/**
* 以document.write的方式向页面中写入js
* 参数 :
o {
?? id : id of the created tag,
?? url : String,
?? script : String
}
用法: dwScript({id : 'cssrain' , url : 'js/fl.js' });
*/
function dwScript(o){
o.id = o.id || "";
o.charset = o.charset || "utf-8";
if (o.script && o.script != ""){
??? document.write("<script id='" + o.id + "'>" + o.script + "<\/script>");
} else if (o.url && o.url != ""){
??? document.write("<script id='" + o.id + "' src='" + o.url + "' charset='" + o.charset + "'><\/script>");
} else throw new Error("no script content or url specified");
}
/**
* 以document.write的方式向页面中写入css
* @param o {
*??? id : id of the created tag,
*??? url : String,
*??? styles : styles text
* }
用法:dwCSS({ id : 'cssrain' , url:'css/default.template.css?'});
*/
function dwCSS(o){
o.id = o.id || "";
if (o.url){
??? document.write('<link id="' + o.id + '" rel="stylesheet" type="text/css" href="' + o.url + '" />');
} else if (o.styles){
??? document.write('<style id="' + o.id + '" >'+o.styles+'<\/style>');
}
}
/**
* 把字符串中 的 半角 转换为全角。
用法:
var a = "d'd'd'd()%[]";
alert(toSafe(a));
当然可以用于表单的值转换。
*/
function toSafe(str)
{
var re;
re = /'/g;
str = str.replace(re,"'");
re =/\)/g;
str = str.replace(re,")");
re = /\(/g;
str = str.replace(re,"(");
re = /%/g;
str = str.replace(re,"%");
re = /\[/;
str = str.replace(re,"[");
re = /\]/;
str = str.replace(re,"]");
return str;
}
function makeToSafe(formName)
{
var i,form;
form = eval(formName);
for(i=0;i<form.elements.length;i++)
{
?? if(form.elements[i].type=="text" || form.elements[i].type=="textarea")
?? {
??? form.elements[i].value = toSafe(form.elements[i].value);
?? }
}
}
/*
?? 小数?? 四舍五入
//Dight 为要转换的数据
//How 要保留的小数位数
用法:
var k = ForDight( 222.5 , 0 ) ;
*/
function ForDight(Dight,How)
{
?? Dight = Math.round (Dight*Math.pow(10,How))/Math.pow(10,How);
?? return Dight;
}
/**************
format:
格式化时间。
用法:
yourdate.format("你的日期格式");
例子:
obj0 = new Date("Sun May 04 2008").format("yyyy-MM-dd");
obj1 = new Date().format("yyyy-MM-dd hh:mm:ss");
obj2 = new Date().format("yyyy-MM-dd");
obj3 = new Date().format("yyyy/MM/dd");
obj4 = new Date().format("MM/dd/yyyy");
**************/
Date.prototype.format = function(format)??
{??
?? var o = {??
???? "M+" : this.getMonth()+1, //month??
???? "d+" : this.getDate(),??? //day??
???? "h+" : this.getHours(),?? //hour??
???? "m+" : this.getMinutes(), //minute??
???? "s+" : this.getSeconds(), //second??
???? "q+" : Math.floor((this.getMonth()+3)/3), //quarter??
???? "S" : this.getMilliseconds() //millisecond??
?? }??
?? if(/(y+)/.test(format)) format=format.replace(RegExp.$1,??
???? (this.getFullYear()+"").substr(4 - RegExp.$1.length));??
?? for(var k in o)if(new RegExp("("+ k +")").test(format))??
???? format = format.replace(RegExp.$1,??
?????? RegExp.$1.length==1 ? o[k] :???
???????? ("00"+ o[k]).substr((""+ o[k]).length));??
?? return format;??
}
/**************
日期减去天数 得到 第二个日期 。
例子:
data_sub_day("12/23/2002",30)
**************/
function data_sub_day(dd,dadd)
{
//可以加上错误处理
var a = new Date(dd)
a = a.valueOf()
a = a - dadd * 24 * 60 * 60 * 1000
a = new Date(a)
alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")
}
/**************
format:
格式化数字.
例子:
var n = format_number( 123456.45656 , 2 ); // .toFixed(2)也可以实现,不过不兼容FF.
alert(n);
**************/
function format_number(str,digit)
{
if(isNaN(str))
{
alert("您传入的值不是数字!");
return 0;
}
else if(Math.round(digit)!=digit)
{
alert("您输入的小数位数不是整数!");
return 0;
}
else
return Math.round(parseFloat(str)*Math.pow(10,digit))/Math.pow(10,digit);
}
?
/**************
* 得到单选框选中的值。
* 用法:
*<input type="radio" value="1" name="cssrain"/>
*<input type="radio" value="2" name="cssrain" checked/>
*<input type="radio" value="3" name="cssrain"/>
*<input type="button" onclick="alert(getRadioValue('cssrain'))" value="test"/>
**************/
function getRadioValue(radioName){
var obj=document.getElementsByName(radioName);
for(var i=0;i<obj.length;i++){
?? if(obj[i].checked){
??? return obj[i].value;
?? }
}
}
/**************
* 复选框全选/不选/反选
* 用法:
<form id="form_a">
<input type="checkbox" value="1" name="a"/>
<input type="checkbox" value="2" name="a" checked/>
<input type="checkbox" value="3" name="a"/>
<input type="button" value="全选" onclick="checkAll(document.getElementById('form_a'),'all')"/>
<input type="button" value="不选" onclick="checkAll(document.getElementById('form_a'),'none')"/>
<input type="button" value="反选" onclick="checkAll(document.getElementById('form_a'),'')"/>
</form>
**************/
function checkAll(form, sel) {
for (i = 0, n = form.elements.length; i < n; i++) {
?? if(form.elements[i].type == "checkbox") {
??? if(form.elements[i].checked == true) {
???? form.elements[i].checked = (sel == "all" ? true : false);
??? } else {
???? form.elements[i].checked = (sel == "none" ? false : true);
??? }
?? }
}
}
/**************
* 复选框检查是否选中。
* 如果没一个选中,会返回false.
* 用法:
<form id="form_a" name="form_a">
<input type="checkbox" value="1" name="a"/>
<input type="checkbox" value="2" name="a" checked/>
<input type="checkbox" value="3" name="a"/>
<input type="button" value="全选" onclick="alert( SCheckBox('form_a','a') )"/>
</form>
**************/
function SCheckBox(_formName,_checkboxName){
var selflag = {'checked':0,'cvalues':[]};
_scheckbox = eval('document.'+_formName+'.'+_checkboxName);
if(_scheckbox){
?? if(eval(_scheckbox.length)){
??? for(i=0;i<_scheckbox.length;i++){
???? if(_scheckbox[i].checked){
????? selflag.checked++;
????? selflag.cvalues.push(_scheckbox[i].value);
???? }
??? };
?? }else if(_scheckbox.checked){
??? selflag.checked++;
??? selflag.cvalues.push(_scheckbox.value);
?? }
?? if(selflag.checked){
??? return selflag;
?? }
}
return false;
}
/**************
收藏到书签.(兼容IE和FF)。
用法:
<input type="button" value="收藏" onclick="addBookmark('cssrain(前端开发)','http://www.cssrain.cn')"/>
**************/
function addBookmark(title,url) {
if (window.sidebar) {
?? window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
?? window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
?? return true;
}
}
/**************
函数 : 文本框得到与失去焦点 操作。
这个方法经常在文本框搜索的时候出现。
文本里显示 “ 搜索 ”,然后当用户鼠标点击此文本,
文本框内容清空。如果用户没填写内容,那么文本的值又复原。
如果填写了,就显示用户填写的。
用法:
<input type="" value="关键字搜索" name="a" onfocus="clearTxt('a','关键字搜索')" onblur="fillTxt('a','关键字搜索')"/>
<input type="text" value="test" name="test" />
**************/
function clearTxt(id,txt) {
if (document.getElementById(id).value == txt)
??? document.getElementById(id).value="" ;
return ;
}
function fillTxt(id,txt) {
if ( document.getElementById(id).value == "" )
??? document.getElementById(id).value=txt;
return ;
}
//也可以使用 defaultValue属性 来做:
//例子:
/*
<input type="text" value="搜索"/>
<input type="text" value="请输入名称"/>
<SCRIPT LANGUAGE="JavaScript">
var inputs =document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
???? if (inputs[i].type == "submit") continue;
???? if (!inputs[i].defaultValue) continue;
????? inputs[i].onfocus = function(){
?????? if(this.value == this.defaultValue )
??? {
???????????????? this.value = "";
??? }
?? }?? //end of onfocus
???? inputs[i].onblur = function(){
?????? if(this.value == "" )
??? {
??????????????? this.value = this.defaultValue;
??? }
?? }?? //end of onblur
}
</SCRIPT>
*/
?
?
====================================================================
/**************
函数 : 用来判断鼠标按的是左键还是右键。(兼容IE和ff)
用法:
onmousedown="mouse_keycode(event)"
**************/
function mouse_keycode(event){
??? var event=event||window.event;
??? var nav=window.navigator.userAgent;
??? if (nav.indexOf("MSIE")>=1) //如果浏览器为IE.解释:因为 document.all 是 IE 的特有属性,所以通常用这个方法来判断客户端是否是IE浏览器 ,document.all?1:0;
{
?? if(event.button==1){alert("左键")}
?? else if(event.button==2){alert("右键")}
}
else if(nav.indexOf("Firefox")>=1) ////如果浏览器为Firefox
{
?? if(event.button==0){alert("左键");}
?? else if(event.button==2){alert("右键");}
}
?? else{ //如果浏览器为其他
??? alert("other");
?? }
}
/**************
函数 :触发某个对象的onclick事件。(兼容IE和FF)
用法:
<input type="button" value="aaa" id="a" onclick=" alert('cssrain') " />
<input type="button" value="触发ID为a的onclick事件" onclick=" handerToClick('a') " />
**************/
function handerToClick(objid){
var obj=document.getElementById(objid);
if(document.all){
?? obj.fireEvent("onclick");
}else{
?? var e=document.createEvent('MouseEvent');
?? e.initEvent('click',false,false);
?? obj.dispatchEvent(e);
}
}
/**************
回车提交。
用法:
<input?? type=text?? onkeydown="keysubmit()">??
**************/
function keysubmit()
{
??? if(event.keyCode==13)
?? {
??? form.submit();
?? }
}
/**************
实现Ctrl+Enter 提交的效果.(兼容IE和FF)
在做这个效果时,发现一个问题,
当表单中如果只有一个文本框时,
回车会默认提交。(没有提交按钮也一样。)
用法:
<form action="#" name="a">
<input?? type="text" />??
<input?? type="text"?? onkeydown="QuickPost( event , document.a )" />??
</form>
**************/
function QuickPost(event,form){
??? var event=event||window.event;
if((event.ctrlKey && event.keyCode == 13)||(event.altKey && event.keyCode == 83)){
?? // event.srcElement.form.submit();
?? form.submit();
}
}
/**************
回车自动跳到下一个文本框。
注;此方法不兼容FF,
因为在FF下,event.keycode是只读属性,不能赋值。
用法:
<form action="#" name="a" onkeydown="QuickNext()">
<input?? type="text" />??
<input?? type="text"?? />??
<input?? type="button" value="test" />
</form>
**************/
function?? QuickNext()??
{
//判断是否为button, 是因为在HTML上会有type="button"
//判断是否为submit,是因为HTML上会有type="submit"
//判断是否为reset,是因为HTML上的"重置"应该要被执行
//判断是否为空,是因为对于HTML上的"<a>链接"也应该被执行,
//这种情况发生的情况不多,可以使用"tabindex=-1"的方式来取消链接获得焦点.
????? if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event.srcElement.type!='textarea' && event.srcElement.type!='')
?????????? {?? event.keyCode = 9; }
}??
/**************
按TAB键移动到下一个输入框时,光标停在文本框文字的最后,方便用户继续输入.
IE默认是全部选中。此方法不兼容FF。
用法:
<input type='text' value='0592' onfocus="moveEnd()">
**************/
function moveEnd()
{
var e=event.srcElement;
var r=e.createTextRange();
r.moveStart('character',e.value.length);
r.collapse(true);
r.select();
}
?
/**************
TEXTAREA自适应文字的行数 .
注;此方法不兼容FF,(onpropertychange)
参数:当前对象 和 最小高度
用法:
<textarea rows=5 name=s1 cols=27 onpropertychange="textarea_scroll(this,60)" style="overflow-y:hidden">
</textarea>
**************/
function textarea_scroll(obj,min)
{
?? if(obj.scrollHeight<min){
????????? obj.style.posHeight=min
?? }else{
????????? obj.style.posHeight=obj.scrollHeight
?? }
}
/**************
改变下拉框选项后,根据选项的不同弹出不同的窗口.
用法:
<select onchange="return select_pop(this);" >
<option selected="selected">--分公司--</option>
<option value="http://www.bj.chinaunicom.com">北京</option>
<option value="http://www.sh.chinaunicom.com">上海</option>
</select>
**************/
function select_pop(fileurl){
??? if (fileurl.options[fileurl.selectedIndex].value != "")
?? window.open(fileurl.options[fileurl.selectedIndex].value,"_blank","toolbar=yes,location=yes,menubar=yes,scrollbars=yes,resizable=yes,left=50,height=500,width=700");
return true;
}
?
/**************
得到字符串的字节数。
用法:
<input?? type="text" name="a" />??
<input?? type="button" value="test" onclick="alert( strlen(document.getElementById('a').value ) )" />
**************/
//
function strlen(string){
????? var str="";
????? str=string;
????? str=str.replace(/[^\x00-\xff]/g,"**");
????? return str.length;
}
//或者
function ByteLength(string){
return string.replace(/[^\x00-\xff]/g,"00").length;
}
/**************
文本框输入字符控制。
只能输入数字。
用法:
<input onkeyup="input_shuzi(this)" onbeforepaste="input_shuzi_before()" />
**************/
function input_shuzi(obj)
{
obj.value=obj.value.replace(/[^\d]/g,'');
}
function input_shuzi_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''));
}
/**************
文本框输入字符控制。
只能输入数字和英文。
用法:
<input onkeyup="input_shuziyinwen(this)" onbeforepaste="input_shuziyinwen_before()" />
**************/
function input_shuziyinwen(obj)
{
obj.value=obj.value.replace(/[\W]/g,'');
}
function input_shuziyinwen_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[\W]/g,''));
}
/**************
文本框输入字符控制。
只能输入汉字。
用法:
<input onkeyup="input_hanzi(this)" onbeforepaste="input_hanzi_before()" />
**************/
function input_hanzi(obj)
{
obj.value=obj.value.replace(/[^\u4E00-\u9FA5]/g,'');
}
function input_hanzi_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''));
}
/**************
文本框输入字符控制。
只能输入全角。
用法:
<input onkeyup="input_quanjiao(this)" onbeforepaste="input_quanjiao_before()" />
**************/
function input_quanjiao(obj)
{
obj.value=obj.value.replace(/[^\uFF00-\uFFFF]/g,'');
}
function input_quanjiao_before(){
clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''));
}
/**************
*只允许输入数字和小数点。
*用法:
*<input type=text onkeyup="clearNoNum(this)"/>
**************/
function clearNoNum(obj)
{
//先把非数字的都替换掉,除了数字和.
obj.value = obj.value.replace(/[^\d.]/g,"");
//必须保证第一个为数字而不是.
obj.value = obj.value.replace(/^\./g,"");
//保证只有出现一个.而没有多个.
obj.value = obj.value.replace(/\.{2,}/g,".");
//保证.只出现一次,而不能出现两次以上
obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
}
/**************
*把输入的字母转成大写。
*用法:
*<input type="text" name="d" onkeyup="input_to_uppercase(this)" />
**************/
function input_to_uppercase(obj)
{
obj.value=obj.value.toUpperCase();
}
/**************
*把输入的字母转成小写。
*用法:
*<input type="text" name="e" onkeyup="input_to_lowercase(this)" />
**************/
function input_to_lowercase(obj)
{
obj.value=obj.value.toLowerCase();
}
/**************
*判断字符中是否包含有 http:// .
*用法:
<input type="text" name="a" />
<input type="button" value="test" onclick=" alert( urlcheck(document.getElementById('a').value) )" />
**************/
function urlcheck(string){
var re;
re=new RegExp("http://");
return re.test(string.toLowerCase());
}
/**************
从URL地址中提取文件名
*用法:
var a =url_filename("http://www.cssrain.cn/abc.rar");
alert( a ) ;// "abc"
**************/
function url_filename(string){
string=string.replace(/(.*\/){0,}([^\.]+).*/ig,"$2")
return string
}
/**************
*实时检测输入框的字数
*用法:
<input type="text" name="explain" id="explain" onkeyup="check_input_Length(this)" >
<small>文字最大长度: 20. 还剩: <span id="chLeft">20</span>.</small>
**************/
function check_input_Length(which)
{
var maxChars = 20;
if (which.value.length > maxChars)
?? which.value = which.value.substring(0,maxChars);
?? var curr = maxChars - which.value.length;
?? document.getElementById("chLeft").innerHTML = curr.toString();
}
/**************
*判断电子邮箱是否符合规范
*用法:
<input type="text" name="a" />
<input type="button" value="test" onclick=" alert( emailcheck(document.getElementById('a').value) )" />
**************/
function emailcheck(string){
var re;
re=new RegExp("^[\\w-_\\.]+@([a-z|0-9|-]+\\.)+[a-z]{2,5}$");
return re.test(string.toLowerCase());
}
====================================================================
/*插入Flash文件在你要插入的位置 。 <script> document.write( GetFlashStr("pro.swf","400px","100px",true) ); </script>*/function GetFlashStr(Path,Width,Height,Transparent){ var Temp,T=""; Temp='<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="FlashH" codebase="" border="0" width="'+Width+'" height="'+Height+'">' Temp+='<param name="movie" value="'+Path+'"/>' Temp+='<param name="quality" value="High"/>' Temp+='<param name="scale" value="ExactFit"/>' if (Transparent) {Temp+=' <param name="wmode" value="transparent"/>';T='wmode="transparent"'} Temp+='<embed src="'+Path+'" pluginspage="" type="application/x-shockwave-flash" name="FlashH" width="'+Width+'" height="'+Height+'" quality="High"'+T+' scale="ExactFit"/>' Temp+='</object>' return Temp;}
|