如何避免使用javascript在第一个位置文本框中输入0？答案

【问题标题】：how avoid 0 to be entered in first position text box using javascript?如何避免使用javascript在第一个位置文本框中输入0？
【发布时间】：2018-02-01 13:47:42
【问题描述】：

我知道它可能重复。但现有的解决方案不适合我。

字段应该接受如下。

有效 - 123,33.00， 100,897,99, 8000 10334 9800,564,88.36

无效 - 001、0、01234234、-123、1.44、.99、12asdf、12ASDF、asdf123、ASDF34

到目前为止的代码。下面的代码在 ngOninit() 中

 $("#amoutField").on("keypress keyup", function() {
    if ($(this.amtField).val() == '0') {
        $(this.amtField).val('');
    }
});

另一种方法是限制范围

avoidZero(e, field) {
  if (field.name === "amoutField ") {
        e = (parseInt(e) == 0) ? 0 : e;
        this.amoutField = e.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        $("#amoutField").val(this.amoutField);
    }
 }

<input class="wdh100p" type="text" id="amoutField" name="amoutField " value="" maxlength="5" 
[ngModel]="amoutField "  (ngModelChange)="avoidZero($event, amts)">

【问题讨论】：

console.log(/^[^0]/.test('0test');
请，请，请不要更改按键时输入的文本的值。这是一种可怕的、糟糕的用户体验。只需在其下方显示一条错误消息或其他内容即可。
同意@JDB。更好地更改模糊事件的值

标签： javascript regex angular typescript

【解决方案1】：

您可以使用正则表达式并在输入值更改时简单地删除所有前导零...

$("#amountField").on("input", function() {
    this.value = this.value.replace(/^[0]*/, "");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="amountField" />

注意：使用input 事件涵盖了输入值可以更改的所有可能方式（复制/粘贴、拖放等）

【讨论】：

它应该用户输入 0 但是当他释放密钥时它应该被删除。在您的 sn-p 中，它不允许在开头输入
它确实被输入了，但它被立即删除。您是否有理由希望用户看到数字出现然后消失？
@Idiot_cheg 我不知道是什么原因显示0 然后删除。我认为这个答案是最好的方法。 :-)
我没有看到要输入的 0
@Idiot_cheg 我明白了。

【解决方案2】：

你需要分开事件来处理不同的情况：

情况

用户在第一个位置输入零
用户将值从另一个字段拖到该字段。
用户输入数字，然后在第一个位置输入零。

$("#amoutField").on("keydown", function(e) {
  if ($(this).val().trim().length === 0 && e.keyCode === 48) {
    e.preventDefault();
  }
}).on("keyup", function() {
  handleKeyupFocus(this);
}).on('focus', function() {
  handleKeyupFocus(this);
}).on('drop', function() {
  var $self = this;
  setTimeout($.proxy(function() {
    handleKeyupFocus($self);
  }), 0);
});

var handleKeyupFocus = function(target) {
  while ($(target).val().startsWith("0")) {
    $(target).val($(target).val().substring(1));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Try to drag, paste zeros from another field, clipboard, Etc.</p>
<input id="amoutField">

【讨论】：

tnx，这几乎很棒。但已向用户显示该字段不应以 0 开头。当他尝试输入 0 时，它应该在他输入的那一刻消失。在这里我不想使用复制粘贴。如何在代码中停止拖动
@Idiot_cheg 抱歉，但我不明白。你能解释一下这个答案有什么问题吗？ :-)
不.. 几乎就是我要找的。我它不允许我第一次输入 0。 pos处不允许0，用户只有拖动才能知道。我想说的是
使用drop事件，当被触发时，使用超时来执行一个删除无效零的函数。答案已更新！
@Idiot_cheg 超出范围。现在你需要完成:-)

【解决方案3】：

你确定“0”是无效的情况吗？

如果没有，最简单的方法是：

function isValid(text) {
    return parseFloat(text).toString() === text;
}

测试：

var test = ["-123", "238", "100", "10336", "101010", "10001", "-001", "0", "01234234"];
var results = test.map(t => isValid(t));

输出：

[ true, true, true, true, true, true, false, true, false ]

奖励：如果零是无效的情况，只需将其过滤掉。

function isValid(text) {
    var numericValue = parseFloat(text).toString();
    return numericValue === text && numericValue !== "0";
}

【讨论】：