如何将 Escape 上的输入字段重置为以前的值
Posted
技术标签:
【中文标题】如何将 Escape 上的输入字段重置为以前的值【英文标题】：How to reset input field on Escape to previous value 【发布时间】：2015-11-03 22:30:29 【问题描述】：当按下转义键时，将输入字段设置为其先前值的正确方法是什么？
我找到了这个指令：
.directive('resetWithEsc', function()
return
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, controller)
element.on('keydown', function(ev)
if (ev.keyCode != 27) return;
scope.$apply(function()
controller.$setViewValue("");
controller.$render();
);
);
;
)
但上面写着TypeError: Cannot read property '$setViewValue' of null
我也尝试存储上一个。 $scope.temp 中的值和用于检测 ESC 按下的指令：
.directive('escKey', function ()
return function (scope, element, attrs)
element.bind('keyup', function (event)
console.log("UP");
if(event.which === 27) // 27 = esc key
console.log("ESC");
scope.$apply(function ()
scope.$eval(attrs.escKey);
);
event.preventDefault();
);
;
)
然后我是这样使用的：
<input data-ng-focus="temp = mymodel.value"
ng-model-options="updateOn: 'blur'" esc-key="mymodel.value = temp"
type="text" data-ng-model="mymodel.value"
/>
它检测到正确的转义键，如果我设置esc-key="mymodel.value = 'TEST'"，它也会将输入字段设置为'TEST'，但使用变量它不起作用。
那么最好的选择是什么？我需要它是动态的，以便在重复循环中使用。
【问题讨论】：
你如何定义“以前的值”？你太努力了，我想。为此，您不需要复杂的指令。您只需要恢复保存的值，这并不难。问题是，保存的价值从何而来？data-ng-click="temp = mymodel.value" 如果我在模板中执行temp，它会显示正确的值
那么每次用户点击输入？这似乎是脆弱和不可靠的。它也不适用于选项卡式焦点等。
你说得对，应该是data-ng-focus我改了。
仍然不是一个好方法。一个 tab out 和一个 tab in 触发一个真正的先前值的覆盖。初始值从何而来？
【参考方案1】：
我采用了@Bharat 的 plunker 示例并对其进行了调整以使用指令。
(function(angular)
'use strict';
angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope)
$scope.users = [
name: 'name1',
data: ''
,
name: 'name2',
data: ''
,
name: 'name3',
data: ''
,
];
])
.directive('escape', function()
return
require: 'ngModel',
link: function(scope, element, attrs, ngModel)
element.bind('keyup', function (event)
if(event.which === 27) // 27 = esc key
ngModel.$rollbackViewValue();
event.preventDefault();
);
);
)(window.angular);<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngModelOptions-directive-blur-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
<form name="userForm">
<ul>
<li data-ng-repeat="user in users">
<label>Name:
<input
type="text"
name="userName$index"
ng-model="user.name"
escape
ng-model-options="updateOn: 'blur change'"/>
</label>
<br />
<pre>user.name = <span ng-bind="user.name"></span></pre>
</li>
</ul>
</form>
</div>
</body>
</html>【讨论】：
【参考方案2】：删除updateOn: 'blur' 并重置temp 成功了...
<input data-ng-focus="temp = mymodel.value"
esc-key="mymodel.value = temp; temp='';"
type="text" data-ng-model="mymodel.value"
/>
仍然会对更清洁的解决方案感到满意，因为实际上只在模糊时更新模型。
【讨论】：
您的要求似乎与角度文档docs.angularjs.org/api/ng/directive/ngModelOptions 中说明的第一个示例相同，还是您没有使用表单？ 对，但是这个例子是静态的，怎么可能在重复循环中做这个动态的呢？ 您的意思是用于 ng-repeat 中的输入。像这样plnkr.co/edit/ShEJrA1JDtm8rqY2NwqT?p=preview 如果这是您正在寻找的东西，那么如果您可以更改您的问题会很好 mh 我不知道有必要这样做的表单和命名输入字段......所以你是对的，这将是不同的问题。感谢您的 plnkr。真的很有帮助。以上是关于如何将 Escape 上的输入字段重置为以前的值的主要内容，如果未能解决你的问题，请参考以下文章
如何通过按 Escape 键重置 QLineEdit 文本？