常用JavaScript函数 47 - 58（自我总结）

最新推荐文章于 2023-03-28 12:17:34 发布

原创最新推荐文章于 2023-03-28 12:17:34 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #jQuery #IE #Chrome #XHTML #ViewUI

Javascript /Jquery / Bootstrap / Web 专栏收录该内容

434 篇文章

订阅专栏

本文汇总了一系列实用的JavaScript技巧，包括打印对象、编辑元素、事件处理、数字验证等，适用于前端开发者日常编码。

47. 打印对象

48、点击编辑：

49、防止回车错误提交

50、回车提交

51、 js随机整数函数

52、判断是否为空

53、运行代码

54、禁止复制黏贴

55、防止页面被包含在 frame 里面

56、防新浪微博文字滚动

57、在光标处插入字符(兼容IE&FF)

58、正则表达式验证数字（正整数, 负整数,整数,正小数,负小数,小数,实数,保留1,2,3位小数）

47. 打印对象

<script>

function print_r(obj) {
  var result = [];
  for (var id in obj) {
    try {
      if (typeof(obj[id]) == "function") {
        result.push("function " + id + ": " + obj[id].toString());
      }
      else {
        result.push("property " + id + ": " + obj[id].toString());
      }
    } catch (err) {
      result.push(id + ": inaccessible");
    }
  }
  return result;
}

/*
以下为测试代码
*/
		var defaults = {  
			tablink	           :	'tablink',    
			tabcontent         :	'tabcontent',  
			tabcount           :	'4',          
			loadtab            :	'1',           
			autochangemenu     :	1,             
			changespeed        :	2,            
			stoponhover        :	0   	
		}; 
			
		var list = print_r(defaults);
		document.write(list.join("<br/>"));

</script>

48、点击编辑：

JavaScript版

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>直接双击页面元素进行修改的HTML代码_IT知道网_</title>
<script type="text/javascript">
function ShowElement(element)
{
	var tag = element.firstChild.tagName;
	if (typeof(tag) != "undefined" && tag == "INPUT")return;

    var oldhtml = element.innerHTML;  //获得元素之前的内容 

    var newobj = document.createElement('input');   //创建一个input元素
    newobj.type = 'text';   //为newobj元素添加类型
	newobj.value = oldhtml;
	newobj.style.width = element.width;

   
    //设置newobj失去焦点的事件
    newobj.onblur = function(){
        element.innerHTML = this.value ? this.value : oldhtml;   //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml。
        }
    element.innerHTML = '';   //设置元素内容为空
    element.appendChild(newobj);   //添加子元素
   
    newobj.focus() //获得焦点
}
</script>
</head>

<body>
  <div onclick="ShowElement(this)">双击即可出现信息框</div>
</body>
</html>

jquery editable 插件（详见附件）

$('.editable1').editable({onEdit:begin});

参考网址： http://arashkarimzadeh.com/index.php/jquery/7-editable-jquery-plugin.html

49、防止回车错误提交

如果一个form里面有多个input + submit按钮的话，那么在input里面回车一般默认为提交第一个，下面的代码可以防止这样的错误发生：（配合jquery使用）

    $("input").keypress(function (e) {
        var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if (keyCode == 13){
            var i;
            for (i = 0; i < this.form.elements.length; i++)
                if (this == this.form.elements[i])
                    break;
            i = (i + 1) % this.form.elements.length;
            this.form.elements[i].click();
            return false;
        }
        else
            return true;
    });

50、回车提交

$(document).ready(function(){
$("按下回车的控件").keydown(function(e){
         e = (e) ? e : (window.event ? window.event : "");
          var curKey = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
           if(curKey == 13){
                $("#回车事件按钮控件").click();
                return false;
           }
   });
});

或者

<script>
 document.getElementByID('SearchKeyword').onkeydown=function(event){
  e = event ? event :(window.event ? window.event : null);
  if(e.keyCode==13){
   //执行的方法
   alert('回车检测到了');
  }
 }
</script>

51、 js随机整数函数

function randomInt(x1,x2)
{
  var min_int = parseInt(x1);
  var max_int = parseInt(x2);
  if ( isNaN(min_int) || isNaN(max_int) )
  {
    alert('parameter error');
    return false;
  }
 
  x1 = Math.min(min_int,max_int);
  x2 = Math.max(min_int,max_int);
 
  return x1 + Math.floor(Math.random() * (x2 - x1 + 1));
}

//用法：var i = randomInt(1,100);    var j = randomInt('100abc','1000cd');

解析：首先将传过来的参数转化为整型，防止了传过来的参数是字符串的情况，这在直接将页面上的元素的值作为参数的情况下很有用。比如以下：

var v1 = document.getElementById('ele1').value;

var v2 = document.getElementById('ele2').value;

var i = randomInt(v1,v2);

因为从页面获得的值是字符串的格式，所以函数先进行了一些判断操作。

Math.random()-返回0~1之间的一个随机的小数，不包含0和1；

js取整

js取整分为3种情况：

Math.ceil(x)-向上取整，如x=5.1取整为6，x=5.8也取整为6；

Math.floor(x)-向下取整，如x=5.1取整为5，x=5.8也取整为5；

Math.round(x)-四舍五入取整，如x=5.1取整为5，x=5.8取整为6；

Math对象的其他函数:

Math.abs(x)-取绝对值，如x=-1去为1，x=0取0，x=1取1；

Math.pow(x,y)-取X的Y次幂，如x=10,y=2,则返回10的2次方，100；

Math.sqrt(x)-取平方根,如x=25，则返回5；

Math.min(x,y)-取最小值,返回X,Y中的小的数，如x=3,y=5则返回3；

Math.max(x,y)-去最大值，返回X,Y中的大的数，如x=3，y=5则返回5

51、 JavaScript 事件绑定和移除，兼容ie/fx/chrome

<input id="a" type="button" value="点我" />注意执行网页时该按扭并没有事件<br/>

<script language="javascript">
var eventUtil = new Object();
//oTarget:目标 sEventType:事件名称 fnHandler:事件触发的函数名
//事件绑定
eventUtil.addEventHandler = function(oTarget,sEventType,fnHandler)
{
	if(oTarget.addEventListener) oTarget.addEventListener(sEventType,fnHandler,false); //如果是FF
	else if(oTarget.attachEvent) oTarget.attachEvent('on'+sEventType,fnHandler); //如果是IE
	else oTarget['on'+sEventType] = fnHandler;
};
//事件移除
eventUtil.removeEventHandler = function(oTarget,sEventType,fnHandler) 
{
	if(oTarget.removeEventListener) oTarget.removeEventListener(sEventType,fnHandler,false); //如果是FF
	else if (oTarget.detachEvent) oTarget.detachEvent('on'+sEventType,fnHandler); //如果是IE
	else oTarget['on'+sEventType] = null;
};

var a = document.getElementById("a");
eventUtil.addEventHandler(a,'click',Hello_ok);

function Hello_ok(){ alert("您好！欢迎您光临Web圈，祝您开心！"); }

onabort：图像的加载被中断
onblur：元素失去焦点
onchange：域的内容被改变
onclick：当用户点击某个对象时调用的事件句柄
ondblclick：当用户双击某个对象时调用的事件句柄
onerror：在加载文档或图像时发生错误
onfocus：元素获得焦点
onkeydown：某个键盘按键被按下
onkeypress：某个键盘按键被按下并松开
onkeyup：某个键盘按键被松开
onload：一张页面或一幅图像完成加载
onmousedown：鼠标按钮被按下
onmousemove：鼠标被移动
onmouseout：鼠标从某元素移开
onmouseover：鼠标移到某元素之上
onmouseup：鼠标按键被松开
onreset：重置按钮被点击
onresize：窗口或框架被重新调整大小
onselect：文本被选中
onsubmit：确认按钮被点击
onunload：用户退出页面