阻止 textArea 中的某个字符

Question

基本上我有一个文本区域，用户无法输入“%”，不需要显示警告/警报，最简单的方法是什么？

关于如何处理这个问题有什么建议吗？ 我不知道我是否必须创建一个函数来完成这项工作......

<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"> 
               </textarea>
</div>

Answer 1

您可以使用.replaceAll()。向 textarea 添加一个事件监听器，并在每次用户输入 textarea 时将每次出现的% 替换为一个空白字符串。

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">
</textarea><br/>
Try entering '%' into the textarea above
</div>

这可以防止用户粘贴/输入字符%

为了更好地支持.replaceAll()，请查看以下问题：Javascript .replaceAll() is not a function type error

这是一个在用户输入%时通知用户的示例：

var txtarea = document.getElementById("exampleFormControlTextarea1");
txtarea.addEventListener("input", function() {
  var b4 = txtarea.value;
  txtarea.value = txtarea.value.replaceAll("%", "");
  if(txtarea.value != b4){
    console.log("You tried to enter %");
  }
})

<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">
</textarea><br/>
Try entering '%' into the textarea above
</div>

或者你可以拦截 keydown 事件，虽然这不会阻止粘贴：

var txtarea = document.getElementById("exampleFormControlTextarea1");
txtarea.addEventListener("keydown", function(e) {
  e = e || window.event;
  if(e.key == "%"){
    e.preventDefault();
  }
})

<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">
</textarea><br/>
Try entering '%' into the textarea above
</div>

Answer 2

您可以为此使用 Event.preventDefault()。

如果事件是可取消的，该方法将取消该事件，这意味着属于该事件的默认动作不会发生，因此在我们的例子中，它将取消添加到文本区域的字符，如果它是'％ '（ASCII 码中的 37）

var textarea = document.getElementById("textArea");
textarea.onkeypress = function(e) {
    if (e.which === 37){
    e.preventDefault();
  }
};

<textarea id="textArea" rows="3" placeholder="enter text without %">
</textarea>

Answer 3

为textarea 中的输入添加事件列表，当用户输入% 时，从textarea 值中删除最后一个字符。

const textArea = document.querySelector("textarea");
textArea.addEventListener("input", (e) => {
    textArea.value = textArea.value.replaceAll("%", "");
});

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

  <label for="exampleFormControlTextarea1">Justify</label>

  <textarea></textarea>
</div>