当 Android 键盘不显示小数时，在键入时格式化数字答案

【问题标题】：Format number as you type when Android keyboard not showing decimal当 Android 键盘不显示小数时，在键入时格式化数字
【发布时间】：2014-10-03 10:38:00
【问题描述】：

背景
在 Samsung Note 和其他 Android 设备上使用默认的 Android 浏览器（互联网）时，当使用“数字”类型编辑输入字段时，作为数字键盘的键盘上没有十进制按钮！

<input id="x" type="number" value="" />

我注意到美国银行 Andriod 应用程序的数字键盘上没有小数点。他们就是这样处理的。

点击字段
键入第一个数字“1”并字段显示 0.01
键入第二个数字“2”并字段显示 0.12
键入第三个数字“3”并字段显示 1.23
输入数字“4”，字段显示为 12.34

我想在我的网站上模仿这个功能，以便在移动设备上使用。

来自mplungjan 的demo 非常接近。我想一直显示两位小数，这个解决方案显示直到第四个字符被按下：

$("#txtamt").keyup(function(obj, evt) {
var event = (window.event) ? window.event : evt;

    //ignore arrow keys so that user can move curser 
    switch(event.keyCode)
    {
        case 37:
        case 38:
        case 39:
        case 40:
            return;
        default:
            break;
    }                

    var str = document.getElementById("txtamt");
    str.value = str.value.replace(".", "");

    if (str.value.length == 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 10).toFixed(1);
        str.value = val1;
    }
    else if (str.value.length > 3) {
        var val = parseFloat(str.value);
        var val1 = (val / 100).toFixed(2);
        str.value = val1;
    }

});

一个明显的解决方案就是改变输入类型并拥有标准的全键盘显示。

【问题讨论】：

你有没有尝试过自己做任何事情？
我不明白如果用户在输入 1 后尝试给出 123，你希望它变成 0.01 还是输入完整的 val n 然后单击某个按钮
您真的想在用户键入时更改输入的内容吗？我想输入“12”的图像 - 点击“1”后，内容将变为 0.01，然后当我点击“2”时，内容将变为 0.00012。

标签： javascript html

【解决方案1】：

我认为这将适用于您使用简单的 javascript

HTML

<input type="text" id="number" onchange="formatNumber()"/>

JS

function formatNumber(){
  var number = document.getElementById('number').value;
  document.getElementById('number').value = ((+number)/100).toFixed(2);
}

DEMO

但这将在您离开文本框时起作用。

【讨论】：

@Nivedita 则很难达到预期，您可以尝试在演示中将keypress 更改为keyup。
是的，你的右键不起作用，但你不认为 当你离开文本框时这会起作用 使它不那么用户友好..

【解决方案2】：

我做了一些研究。

您可以编写一个智能代码，首先检查用户是否停止输入值，然后将输入转换为所需的形式，如下所示：

HTML：

  <input type="text" id="num" />

JS代码：

var timeoutReference;
$(document).ready(function() {
    $('input#num').keypress(function() {
        var _this = $(this); 

        if (timeoutReference) clearTimeout(timeoutReference);
        timeoutReference = setTimeout(function() {
            number = document.getElementById('num').value;

      document.getElementById('num').value = ((+number)/100).toFixed(2);
        }, 1000);
    });
});

直播Demo

请参阅this SO 答案以获得更多解释。

【讨论】：

【解决方案3】：

试试这个，DEMO 这里

$('#test').change(function() {
    var testValue = parseInt($('#test').val());

    $('#test').val((testValue/100));
});

【讨论】：

这不处理小数位
但问题不是说输入将是十进制数字。 OP在输入时想要的是十进制，你能帮我@joews
@Barry，如果您需要任何进一步的帮助，请检查小提琴并恢复。

【解决方案4】：

查看这个 JSFiddle 演示。这将展示您想知道的 javascript 方面：

Click here to visit the JSFiddle demo

获得你的神奇数字的关键是这一行：

var output = parseInt(document.getElementById("inputID").value)*.01;
document.write(output);

【讨论】：

【解决方案5】：

此解决方案模仿了问题中描述的功能和用例。我在输入字段中添加了 type 和 value 属性。

Demo

<input id="txtamt" maxlength="8" type=numberic value="0.00" />

修改代码以格式化任意长度的输入字符串（删除条件语句）。

$("#txtamt").keyup(function (obj, evt) {
var event = (window.event) ? window.event : evt;

//ignore arrow keys so that user can move curser 
switch (event.keyCode) {
    case 37:
    case 38:
    case 39:
    case 40:
        return;
    default:
        break;
}

var str = document.getElementById("txtamt");
str.value = str.value.replace(".", "");

var val = parseFloat(str.value);
var val1 = (val / 100).toFixed(2);
str.value = val1;

});

【讨论】：