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

Posted 2023-05-07

【中文标题】禁止在文本区域输入某些字符

【英文标题】：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 值。

【参考方案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("%", "");