禁止在文本区域输入某些字符

Question

所以我有一个textArea，我不能让用户在上面键入"%"；为了解决这个问题，我做了以下操作：

html:

<div class="col-12 col-xs-12 col-sm-12 col-md-6">
<div class="col-md-12 label-base">
<label for="exampleFormControlTextarea1">Justificativa</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>
</div>

我的控制器内部的功能：

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

我很确定函数内部的逻辑是有效的，但不知何故，onkeypress属性没有调用我的函数。。。我仍然可以在文本区域键入"%"。

有什么建议吗？？不知道我做错了什么。

Answer 1

不用添加事件侦听器，而是使用ngModel。NgModelController。您可以从控制器访问要更新的绑定变量的属性，也可以像本例一样将其作为值传递。

<div class="col-12 col-xs-12 col-sm-12 col-md-6">
<div class="col-md-12 label-base">
<label for="exampleFormControlTextarea1">Justificativa</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" 
ng-change="test(negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial)">
</textarea>
</div>
</div>

从控制器中，您可以转换值并将其分配回您的变量

$scope.test = function (value) {
negociacaoEspecCtrl.proposta.dadosCadastro.negociacaoEspecial.justificativaNegociacaoEspecial = value.replaceAll("%", "");
}