Javascript 页面清除-JQuery Mobile
由于我的应用程序使用了多页模板，所以当我导航回同一页时，我以前输入到表单中并选择的数据就会出现。我正在寻找一种方法，当用户返回页面时，将页面恢复为默认页面。页面上有表单、选择、复选框和img标记 有人向我建议： 只需将自定义属性（如data default=“true”）添加到默认元素（例如0） 但如果可能的话，我想进一步澄清。谢谢工作示例： 用法： 看看提供的代码，使用的每个元素都有一个称为数据默认值的自定义属性，它用于确定哪个元素是默认元素 HTML:Javascript 页面清除-JQuery Mobile,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,由于我的应用程序使用了多页模板，所以当我导航回同一页时，我以前输入到表单中并选择的数据就会出现。我正在寻找一种方法，当用户返回页面时，将页面恢复为默认页面。页面上有表单、选择、复选框和img标记 有人向我建议： 只需将自定义属性（如data default=“true”）添加到默认元素（例如0） 但如果可能的话，我想进一步澄清。谢谢工作示例： 用法： 看看提供的代码，使用的每个元素都有一个称为数据默认值的自定义属性，它用于确定哪个元素是默认元素 HTML: 这会是在表单提交之后吗？不会，即使我在
这会是在表单提交之后吗？不会，即使我在没有提交的情况下键入内容，当我导航回页面时，我键入的内容仍然在那里我认为这与您的会话以及浏览器存储它的方式有关。不确定该怎么办。它与会话无关，这就是jQuery Mobile的工作原理。我将为您创建一个有效的解决方案。谢谢Gajotres，这将非常有帮助。谢谢，这太棒了！我在页面上还有一个img标签，上面显示了从相机上拍摄的图像，有没有办法将其清除为空？当然可以。只需使用这段代码，过滤img元素和cleatsrc属性。
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<input type="button" id="clr-form-btn" value="Clear form"/>
<label for="basic">Text Input:</label>
<input type="text" name="name" id="basic" value=""/>
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" checked="checked" data-default-value=""/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
<label for="select-choice-0" class="select">Shipping method:</label>
<select name="select-choice-0" id="select-choice-0" data-default-value="standard">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
<a href="#index" class="ui-btn-left">Back</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
$(document).on('pagebeforeshow', '#index', function(){
cleanForm();
});
function cleanForm() {
var page = $.mobile.activePage;
// Reset input elements
page.find('.ui-content *').filter("[type='text']").each(function(){
$(this).val('');
});
// Reset drop down elements
page.find('.ui-content *').filter(".ui-select").each(function(){
var select = $(this).find('select');
var defaultValue = select.attr('data-default-value');
select.val(defaultValue);
select.selectmenu('refresh', true);
});
// Reset flip switch elements
page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
var flipSwitch = $(this);
var defaultValue = flipSwitch.attr('data-default-value');
flipSwitch.val(defaultValue);
flipSwitch.slider('refresh');
});
// Reset radio elements
page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
var radio = $(this);
var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
});
}