如何以角度停止输入类型=“文本”字段中的字符

Posted 2023-03-06

【中文标题】如何以角度停止输入类型=“文本”字段中的字符

【英文标题】：How to stop the characters in Input type="text" field in angular

【发布时间】：2019-11-08 11:33:22

【问题描述】：

我的客户要求如下 1.输入字段应该是文本 2. 不允许字符 3.它应该有0-100的范围 4.输入格式为99.99

我们正在使用 Angular 7。模式不适用于验证

谁能帮帮我。我从一天开始就在挣扎:( 谢谢！

【问题讨论】：

为什么不使用type="number"？

当我使用数字时，我们会得到一个上下箭头，这不是要求的一部分。谢谢

您可以尝试this answer 中给出的技术来隐藏箭头。

你可以尝试使用掩码：npmjs.com/package/ngx-mask

你可以让你的自定义验证器函数这可能会有所帮助***.com/questions/39847862/…

【参考方案1】：

要达到预期的结果，请使用keyup事件的以下选项

在每个按键上，将输入值按 '.' 分割 拆分数组的第一部分将在小数点前有值，数组的第二部分将在小数点后有值 根据长度重新分配输入值

component.html

<input type="text" (keyup)="onKeyup($event)" />

component.ts

 onKeyup(e) 
    const val = e.target.value.split(".");
    if (!val[1]) 
      e.target.value =
        val[0].split("").length > 2
          ? e.target.value.substr(0, e.target.value.length - 1)
          : e.target.value;
     else 
      e.target.value =
        val[1].split("").length > 2
          ? val[0] + "." + val[1].substr(0, val[1].length - 1)
          : e.target.value;
    
  

工作代码示例供参考 - https://codesandbox.io/s/angular-p1gh1

使用 html 和 javascript 更新代码

codepen - https://codepen.io/nagasai/pen/xoLqdN?editors=1010

function onKeyup(e) 
  const val = e.target.value.split(".");
    if (!val[1]) 
      e.target.value =
        val[0].split("").length > 2
          ? e.target.value.substr(0, e.target.value.length - 1)
          : e.target.value;
     else 
      e.target.value =
        val[1].split("").length > 2
          ? val[0] + "." + val[1].substr(0, val[1].length - 1)
          : e.target.value;
    
  

<input type="text" onkeyup ="onKeyup(event)"/>