代码语言
.
CSharp
.
JS
Java
Asp.Net
C
MSSQL
PHP
Css
PLSQL
Python
Shell
EBS
ASP
Perl
ObjC
VB.Net
VBS
MYSQL
GO
Delphi
AS
DB2
Domino
Rails
ActionScript
Scala
代码分类
文件
系统
字符串
数据库
网络相关
图形/GUI
多媒体
算法
游戏
Jquery
Extjs
Android
HTML5
菜单
网页交互
WinForm
控件
企业应用
安全与加密
脚本/批处理
开放平台
其它
【
Css
】
HTML5 本地存储和 jQuery 来持久化表单数据
作者:
沉淀岁月
/ 发布于
2013/9/10
/
1177
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML5 Local Storage Example</title> <!-- include Bootstrap CSS for layout --> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>HTML5 Local Storage Example</h1> <form method="post" class="form-horizontal"> <fieldset> <legend>Enquiry Form</legend> <div class="control-group"> <label class="control-label" for="type">Type of enquiry</label> <div class="controls"> <select name="type" id="type"> <option value="">Please select</option> <option value="general">General</option> <option value="sales">Sales</option> <option value="support">Support</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="name">Name</label> <div class="controls"> <input class="input-xlarge" type="text" name="name" id="name" value="" maxlength="50"> </div> </div> <div class="control-group"> <label class="control-label" for="email">Email Address</label> <div class="controls"> <input class="input-xlarge" type="text" name="email" id="email" value="" maxlength="150"> </div> </div> <div class="control-group"> <label class="control-label" for="message">Message</label> <div class="controls"> <textarea class="input-xlarge" name="message" id="message"></textarea> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input name="subscribe" id="subscribe" type="checkbox"> Subscribe to our newsletter </label> </div> </div> </fieldset> <div class="form-actions"> <input type="submit" name="submit" id="submit" value="Send" class="btn btn-primary"> </div> </form> </div> <!-- include jQuery library --> <script src="//code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function () { /* * check browser supports local storage */ if (localStorage) { /* * if form field values exist in local storage use * them to populate the form when the page loads */ if (localStorage.type) { $("#type").find("option[value=" + localStorage.type + "]").attr("selected", true); } if (localStorage.name) { $("#name").val(localStorage.name); } if (localStorage.email) { $("#email").val(localStorage.email); } if (localStorage.message) { $("#message").val(localStorage.message); } if (localStorage.subscribe === "checked") { $("#subscribe").attr("checked", "checked"); } /* * when a form field changes store it's value in local storage */ $("input[type=text],select,textarea").change(function(){ $this = $(this); localStorage[$this.attr("name")] = $this.val(); }); $("input[type=checkbox]").change(function(){ $this = $(this); localStorage[$this.attr("name")] = $this.attr("checked"); }); $("form") /* * clear local storage when the form is submitted */ .submit(function(){ localStorage.clear(); }) /* * output local storage to the console each time the form changes * (you may want to remove this code on the production server) */ .change(function(){ console.log(localStorage); }); } }); </script> </body> </html>
试试其它关键字
持久化表单
同语言下
.
前端PC-移动端CSS公共样式+HTML
.
手机端页面通用样式
.
H5页面通用头部设置
.
elect默认样式美化代码兼容移动端和pc端
.
按钮效果 css
.
唤醒app
.
放大效果
.
html5+css3实现上拉和下拉刷新
.
html上传图片后，在页面显示上传的图片
.
html5实现点击弹出图片
可能有用的
.
C#实现的html内容截取
.
List 切割成几份 工具类
.
SQL查询 多列合并成一行用逗号隔开
.
一行一行读取txt的内容
.
C#动态修改文件夹名称(FSO实现，不移动文件)
.
c# 移动文件或文件夹
.
c#图片添加水印
.
Java PDF转换成图片并输出给前台展示
.
网站后台修改图片尺寸代码
.
处理大图片在缩略图时的展示
沉淀岁月
贡献的其它代码
(
39
)
.
CSS置顶页脚
.
CSS跨浏览器透明度
.
timer定时器的用法演示
.
PHP实现网站保存快捷桌面方式
.
定位函数所在模块
.
提示信息的自动隐藏
.
提交表单后禁用提交按钮
.
文本框输入值文字消失
.
批量剪切图片
.
批量生成ETL Automation APP下Perl脚本执行目录
Copyright © 2004 - 2024 dezai.cn. All Rights Reserved
站长博客
粤ICP备13059550号-3