`

页面离开,及其表单页面的值进行修改时,提示进行保存。

    博客分类:
  • js
阅读更多

<script>

// 验证当前表单的内容是否进行修改

//2点注意

//1,表单元素都有默认值属性,比如element.defaultValue element.defaultChecked  element.options[j].defaultSelected

 

//2select元素的type类型是:""select-one"或者"select-multiple",而不是"select"

//

function IsFormChanged() {

    var isChanged = false;

    var form = document.forms[0];

    for (var i = 0; i < form.elements.length; i++) {

        var element = form.elements[i];

        var type = element.type;

        if (type == "text" || type == "hidden" || type == "textarea" || type == "button") {

         

         

            if (element.value != element.defaultValue) {

                isChanged = true;

                break;

            }

        } else if (type == "radio" || type == "checkbox") {

            if (element.checked != element.defaultChecked) {

                isChanged = true;

                break;

            }

        } 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) {

                    isChanged = true;

                    break;

                }

            }

        } else {

           

        }    

    }   

 

    return isChanged;

}

</script>

 

<script   language="javascript"> 

   // 离开页面清除有关的 保存的vfilter

  window.onbeforeunload = function ()

  {

          var s=IsFormChanged();

         

          if(s==true)

          {

            return "当前数据尚未保存";

          }

    }

    

  

  </script>

 

使用方法:在标记为红色的部分,添加在页面中。在form表单

显示效果:表单中,修改了的时候,返回有关确认离开的提示。

 

分享到:
评论

相关推荐

    javascript js 鼠标事件 大全,js鼠标拖动事件,js鼠标移动事件.docx

    本文档详细介绍了各种鼠标事件及其应用场景,并扩展到了其他与用户交互相关的事件类型,例如键盘事件、页面事件、表单事件等。通过这些事件的合理应用,可以极大地提升用户体验,并为开发者提供了丰富的工具箱来实现...

    JavaScript中的所有on事件

    页面加载完成事件,当整个页面及其所有资源加载完毕时触发,可用于初始化页面状态或执行脚本。 #### 30. `onlosecapture` 当元素失去捕获焦点时触发,常用于处理复杂的鼠标事件流,确保元素可以正确地接收和响应...

    JS全部事件整理汇总

    34. **onUnload**:当用户离开页面时触发此事件。可用于保存数据或者清除资源。 #### 三、应用场景举例 - **onBeforePrint**:在打印前调整页面样式,比如隐藏不必要的元素,调整字体大小等。 - **onDragEnd**:在...

    Javascript鼠标事件大全

    - **示例用途**:询问用户是否保存更改。 - **兼容性**:IE4及以上版本、Netscape支持、Opera支持。 3. **onError(错误事件)**: - **描述**:当页面出现错误(如脚本错误或资源加载失败)时触发。 - **示例...

    javascript事件

    - **应用场景**:常用于表单验证,例如当用户离开输入框时进行检查。 #### 3. onchange - **描述**:当用户更改了域的内容时触发。 - **支持浏览器**:Firefox 1+、Netscape 2+、IE 3+。 - **应用场景**:适用于...

    javascript 的事件

    - **用途**:常用于提示用户是否有未保存的数据或执行页面离开前的清理工作。 ##### 13. **onbeforeupdate** - **描述**:当成功更新数据源对象中的关联对象前在数据绑定对象上触发。 - **用途**:允许在数据...

    ASP.NET程序开发范例宝典(C#)

    通过修改Web.config文件来指定项目的默认启动页面。 - **示例008**:身份验证。介绍几种常见的ASP.NET身份验证方式,包括表单认证、Windows集成认证等。 #### 第二章:页面设计与导航 - **2.1 页面布局** - **...

    计算机专业英语词汇.pdf

    例如:“Do not save changes if prompted”(如果提示保存更改则不保存)。 ***rmation: 信息。知识或数据的传递。例如:“Gather information about the new update”(收集有关新更新的信息)。 48. choose: ...

    HTML中事件触发列表与解说

    2. **onChange**:元素值改变事件,当表单元素的值发生变化时触发。 - **浏览器支持**:IE3, Netscape2, Opera3及以上版本。 - **示例应用**:实时验证表单输入、更新数据模型。 3. **onReset**/ **onSubmit**:...

    Axure快速原型设计参考资料

    - **应用场景**:可用于实现光标聚焦时的提示信息显示或离开输入框时的数据校验。 - **3.3.5 变量(Variables)** - **变量存储**:用于存储数据值,可在项目中多次引用。 - **实例应用**:如存储用户的输入...

Global site tag (gtag.js) - Google Analytics