onkeypress() 未调用函数

Posted 2023-05-07

【中文标题】onkeypress() 未调用函数

【英文标题】：Function not being called by 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

【参考方案1】：

来自这个帖子：https://***.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("%", "");