21个值得收藏的Javascript技巧

2013-8-2 10:57| 发布者: 红黑魂| 查看: 2319| 评论: 0|来自: 51cto

摘要: 在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。 1 Javascript数组转换为CSV格式首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为 ...

8 检查是否按了回退键

同样，可以检查用户是否按了回退键，代码如下：

window.onbeforeunload = function() {  
    return "You work will be lost.";  
};

9 检查表单数据是否改变

有的时候，需要检查用户是否修改了一个表单中的内容，则可以使用下面的技巧，其中如果修改了表单的内容则返回true，没修改表单的内容则返回false。代码如下：

function formIsDirty(form) { 
  for (var i = 0; i < form.elements.length; i++) { 
    var element = form.elements[i]; 
    var type = element.type; 
    if (type == "checkbox" || type == "radio") { 
      if (element.checked != element.defaultChecked) { 
        return true; 
      } 
    } 
    else if (type == "hidden" || type == "password" || 
             type == "text" || type == "textarea") { 
      if (element.value != element.defaultValue) { 
        return true; 
      } 
    } 
    else if (type == "select-one" || type == "select-multiple") { 
      for (var j = 0; j < element.options.length; j++) { 
        if (element.options[j].selected != 
            element.options[j].defaultSelected) { 
          return true; 
        } 
      } 
    } 
  } 
  return false; 
} 
window.onbeforeunload = function(e) { 
  e = e || window.event;   
  if (formIsDirty(document.forms["someForm"])) { 
    // IE 和 Firefox 
    if (e) { 
      e.returnValue = "You have unsaved changes."; 
    } 
    // Safari浏览器 
    return "You have unsaved changes."; 
  } 
};

10 完全禁止使用后退键

下面的技巧放在页面中，则可以防止用户点后退键，这在一些情况下是需要的。代码如下：

<SCRIPT type="text/javascript"> 
    window.history.forward(); 
    function noBack() { window.history.forward(); } 
</SCRIPT> 
</HEAD> 
<BODY onload="noBack();" 
    onpageshow="if (event.persisted) noBack();" onunload="">

11 删除用户多选框中选择的项目

下面提供的技巧，是当用户在下拉框多选项目的时候，当点删除的时候，可以一次删除它们，代码如下：

function selectBoxRemove(sourceID) { 
    //获得listbox的id 
    var src = document.getElementById(sourceID); 
    //循环listbox 
    for(var count= src.options.length-1; count >= 0; count--) { 
         //如果找到要删除的选项，则删除 
        if(src.options[count].selected == true) { 
                try { 
                         src.remove(count, null); 
                           
                 } catch(error) { 
                           
                         src.remove(count); 
                } 
        } 
    } 
}

12 Listbox中的全选和非全选

如果对于指定的listbox，下面的方法可以根据用户的需要，传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目，代码如下：

function listboxSelectDeselect(listID, isSelect) { 
    var listbox = document.getElementById(listID); 
    for(var count=0; count < listbox.options.length; count++) { 
            listbox.options[count].selected = isSelect; 
    } 
}