重置 HTML 表单字段（避免撤消功能）

【问题标题】：Reset HTML form fields (avoid undo capability)重置 HTML 表单字段（避免撤消功能）
【发布时间】：2014-11-02 10:30:09
【问题描述】：

我在 SPA（基于 AngularJS 的单页应用程序）中遇到问题。

场景：

用户使用包含用户名和密码的导航栏登录系统，在后台我正在重置包含登录名和密码的表单..
用户点击指向他/她的个人资料的链接。
按下导航栏注销按钮，我将用户引导至主页。
如果我站在用户名输入控件中并按 Control + Z 撤消，我会得到用户名，另一个 Control + Z 也会检索密码。

如何重置这两个字段的撤消（历史）功能。

顺便说一句：如果我刷新页面，它就消失了。

谢谢你，
陈

【问题讨论】：

标签： javascript html angularjs twitter-bootstrap

【解决方案1】：

这在 IE 和 Firefox 中似乎是一个问题（或功能？），但在 Chrome 中似乎不会发生。

从输入框中清除撤消历史记录的一种快速而简单的方法是将它们从 DOM 中删除并重新添加。在 Angular 中，我们可以使用 ngIf...

<input ng-model="user.username" type="text"     ng-if="enabled" placeholder="Username" />
<input ng-model="user.password" type="password" ng-if="enabled" placeholder="Password" />

清除文本框时，切换enabled 属性...

$scope.clear = function () {
    $scope.user = {};

    $scope.enabled = false;
    $timeout(function () { $scope.enabled = true });
};

Live Demo

【讨论】：