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

【问题标题】：Disable input of certain characters in text area禁止在文本区域输入某些字符
【发布时间】：2021-04-20 17:54:32
【问题描述】：

所以我有一个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 属性没有调用我的函数...我仍然可以在文本区域中输入“%”。

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

【问题讨论】：

为什么使用getElementById 获取textarea 元素？理论上你只需要使用ng-change 指令并传递你的替换函数。这将改变您的 ng-model 值。

标签： javascript angularjs controller textarea

【解决方案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>

您可以从控制器转换值并将其分配回您的 var。

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

【讨论】：