AngularJS 不断监视文本输入答案

【问题标题】：AngularJS constantly watch on text inputAngularJS 不断监视文本输入
【发布时间】：2015-03-05 09:44:51
【问题描述】：

我想知道是否可以不断地查看文本输入，例如输入一个字符串然后运行一个函数。

我会用它来玩 html 游戏，如果你喜欢在随机时刻输入暂停这个词，你就可以暂停游戏。

这有可能吗？还是有任何简单的示例脚本？这对我有很大帮助！谢谢！

【问题讨论】：

你可以在作用域变量上使用watch
但是我怎样才能不断地观察具有某些特定类型字符的特定字符串或字符串类型呢？将每个新字符保存在一个新变量中并检查它是否包含它是否明智？
从bennadel.com/blog/…获得更好的想法

标签： javascript angularjs input textwatcher

【解决方案1】：

假设您有一个带有ng-model="myTextParam" 的输入。您可以在控制器中编写以下内容：

$scope.$watch(function() { return $scope.myTextParam; }, function (newVal, oldVal) {
    if (newVal === "string test") {
       //do whatever
    }
});

Fiddle

【讨论】：

【解决方案2】：

您可以使用 $scope.$watch() 在每次范围变量更改时运行特定函数。然后您可以检查您的字符串是否等于“暂停”。

$scope.$watch('typeModel', function(newVal, oldVal){
    if(newVal.toLowerCase() === 'pause'){
        alert('Pause!');
    }
});

小提琴：http://jsfiddle.net/U3pVM/13834/

更新您可以使用技巧来隐藏您的输入，并确保它不会失去焦点。

这个 css 确保你的 html 正文占据所有可用空间：

html,body {
    width: 100%;
    height: 100%;
}

您可以在 body 上注册一个 clickhandler 以确保您始终关注输入：

document.body.onclick = function(event){        
    document.getElementById('input_field').focus();
}

autofocus 部分确保输入字段关注页面加载：

<input id="input_field" type="text" ng-model="typeModel" autofocus>

你可以做一些 css 技巧来隐藏你的输入（这里不是最好的例子，只是为了演示目的）：

input {
    opacity: 0.01;
}

更新小提琴：http://jsfiddle.net/U3pVM/13847/

【讨论】：

是的，这应该适用于输入字段，但它如何适用于整个页面或特定元素？
@RobinTimman 您可以使用隐藏文本输入等技巧，并确保它不会失去焦点。我可以更新我的答案。