您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

如何使HTML5数字字段显示尾随零?

如何使HTML5数字字段显示尾随零?

我对此进行了一些尝试,并查看了规格。它说它必须是一个有效的浮点数。在给出的有效浮点数的定义中有一句话引起了我的注意:

的 是通过将JavaScript运算符ToString应用于n获得的字符串。

这意味着格式将始终与评估数字一致,然后对该数字使用JavaScript的toString。所以没有尾随的0。

因此,您将不得不使用JavaScript。这不是很简单,因为document.getElementById('numInput').value = '0.50';仍然会更正为0.5,因此不会在onchange可以阻止认操作的地方触发验证,而是在内部触发验证。

这是我能想到的最好的解决方案…这有点麻烦,并且需要进行一些调整以提高鲁棒性,但希望它能够满足您的要求:

var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
    this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
    this.setAttribute('type', 'number');
});

因此,如果用户想通过键入来输入数字,它将输入类型切换为文本,但是当他们单击它时,它将把它转换回数字。

如果无论用户键入什么,总是想要尾随0,则可以执行以下操作:

var numInput = document.getElementById('numInput');
numInput.addEventListener('blur', function () {
    if (this.value === '') {
        return;
    }
    this.setAttribute('type', 'text');
    if (this.value.indexOf('.') === -1) {
        this.value = this.value + '.00';
    }
    while (this.value.indexOf('.') > this.value.length - 3) {
        this.value = this.value + '0';
    }
});
numInput.addEventListener('focus', function () {
    this.setAttribute('type', 'number');
});

我认为第二种解决方案更符合用户的期望,但是这意味着如果用户键入0.5,它将被强制转换为0.50,因此这取决于您是否要这样做。

其他 2022/1/1 18:22:22 有455人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶