onkeypress() 未调用函数答案

【问题标题】：Function not being called by onkeypress()onkeypress() 未调用函数
【发布时间】：2021-04-22 13:48:38
【问题描述】：

我的任务是不让用户在 textArea 中键入“%”，因此我这样做了

但是一旦我在文本区域内点击，我仍然可以输入 '%'... 这意味着 onkeypress 没有识别我的功能，或者功能本身是错误的。

$scope.test = function() {
  var txtarea = document.getElementById("exampleFormControlTextarea1");
  txtarea.addEventListener("input", function() {
    txtarea.value = txtarea.value.replaceAll("%", "");
  })
}

我也试过这种方式：

function myfunction () {
        var txtarea = document.getElementById("exampleFormControlTextarea1");
        txtarea.addEventListener("input", function() {
            txtarea.value = txtarea.value.replaceAll("%", "");
        })
    }

<div class="col-md-12 label-base">

  <label for="exampleFormControlTextarea1">Justify</label>
  <textarea style="resize: none" ng-disabled="negociacaoEspecCtrl.proposta.flagDesabilitaEdicaoProposta" 
  class="form-control observacoes" id="exampleFormControlTextarea1" rows="3" 
  ng-model="negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial"
    onkeypress="test()"></textarea>
</div>

【问题讨论】：

不要在已经是事件侦听器的函数中添加事件侦听器。
所以在 getElementById... 之后我删除 'txtarea.addEventListener("input", function() ' 并且只让 ' txtarea.value = txtarea.value.replaceAll("%", "") ;' ?
@PedroPastori 我也会删除txtarea.addEventListener...。这不是真正的 AngularJS 做事方式。
这能回答你的问题吗？ Restrict Special Characters in HTML & AngularJs

标签： javascript angularjs function controller textarea

【解决方案1】：

来自这个帖子：https://stackoverflow.com/a/35777284/1772933

将过滤器与 ng-change 函数一起使用，例如：

angular.module("test", [])
    .filter("purger", function() {
        return function(input) {
            return input.replace(/%/gi, "");
        }
    }).controller("testController", function($scope, purgerFilter) {
        $scope.onChange = function() {
            $scope.negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial = purgerFilter($scope.negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial);
        }
    })

和你的元素：

<textarea ... 
ng-model="negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial"
ng-change="onChange()"></textarea>

【讨论】：

【解决方案2】：

我相信你要找的是ngKeypress这里

你可以像这样在 ngKeypress 上调用你的函数。我冒昧地将您的 ng-model 对象重命名为此处的模型，因为您的对象太长了

<div class="col-md-12 label-base">

  <label for="exampleFormControlTextarea1">Justify</label>
  <textarea style="resize: none" ng-disabled="negociacaoEspecCtrl.proposta.flagDesabilitaEdicaoProposta" 
  class="form-control observacoes" id="exampleFormControlTextarea1" rows="3" 
  ng-model="model"
    ng-keypress="test()"></textarea>
</div>

因为你的 textarea 有一个 ng-model，你应该把你的方法改成这个

$scope.test = function() {
   console.log("Method called");
   $scope.model = $scope.model.replaceAll("%", "");
}

【讨论】：