按下某个键时清除输入字段答案

【问题标题】：Clear input field when a key is pressed in it按下某个键时清除输入字段
【发布时间】：2016-06-22 08:27:47
【问题描述】：

我试图清除 angularjs 指令中 keypress 事件的输入字段。

HTML：

<input class="magic-input" type="number" ng-model="demo.input">

指令：

.directive('magicInput', function () {
return {
    restrict: 'C',
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
        elem.bind('keypress', function () {
            ngModel.$setViewValue('');
            ngModel.$render(); 
        });
    }
}
});

这里的问题是指令清除了当前文本，但按下的键仍留在输入字段中。

here 解决了这个问题。

【问题讨论】：

你到底想要什么，你能解释一下你的要求，以便更好地理解这个问题。
如果您按下一个键，该指令将始终清除输入，因此您无法在此处键入。我不明白你想做什么，请给我们更多信息！

标签： angularjs angularjs-directive

【解决方案1】：

我可以理解您的问题。我建议您尝试使用“keyup”事件代替“keypress”事件。

试试这个

.directive('maginInput', function () {
return {
    restrict: 'C',
    require: 'ngModel',
    link: function (scope, elem, attrs, ngModel) {
        elem.bind('keyup', function () {
            ngModel.$setViewValue('');
            ngModel.$render(); 
        });
    }
}
});

检查这个小提琴Here

【讨论】：

感谢@Viplock。这解决了我的问题。如果您能解释为什么我的代码不起作用，那就太好了。
@Pratik 如果您的问题得到解决，请接受回答
通过“keypress”事件首先执行代码并清除输入字段中的值，然后通过键值更新文本框的值。但是在“keyup”事件中，它将首先通过键值（按下的键）更新文本框的值，然后执行代码以清除文本框的值。希望这个解释对你来说是清楚的。

【解决方案2】：

将您的链接功能更改为以下内容：

 link: function (scope, elem, attrs, ngModel) {
    elem.bind('keypress', function (e) {
        ngModel.$setViewValue('');
        ngModel.$render(); 
        e.preventDefault();  //Note this
    });
}

e.preventDefault() 将阻止按键事件完成。

【讨论】：