HTML"；“数字”；不允许JavaScript显示逗号的输入

注意：我知道这与其他问题类似，但出于语义和其他原因（例如，易于在iOS上输入），我特别希望HTML输入为

type=“number”

。这就是问题所在

我正在尝试设置一个HTML表单，使数字字段显示数千个逗号，例如“10000000”而不是“10000000”。我想设置它，使字段显示逗号，但当它获得实际编辑的焦点时，逗号就会消失

我可以在没有任何问题的情况下手动将逗号添加到值中（我主要在Firefox~59中进行测试）；但是，每当我试图让JavaScript添加逗号时，该字段就会变为空白。有人知道怎么做吗

（注意，我在这里使用numbers.js进行格式化…）

以下是我所拥有的：

$(document).ready(function(){
    var numberFields = $("input[type=number]");
    numberFields.each( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    numberFields.focus( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    numberFields.blur( function(){
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
});

HTML输入示例：

---

（顺便说一句——而且很方便，我已经确认，将带有逗号的数字提交到HTML表单处理脚本只会删除逗号，并将未格式化的数字放入DB.Sweet！）

我不熟悉numeric.js，但如果我这样做，我只会将数值保存为数据属性，然后使用

.toLocaleString

格式化，请记住，您可以在

文本

和

数字

类型之间切换，以便显示逗号：

看到iOS的问题，我相信下面的方法会奏效。您可以克隆元素，然后将原始元素设置为

text

输入。然后，获取原始元素的位置，并将新元素设置为绝对位于原始元素上方。现在，将数字输入设置为

opacity:0

，这样您将看不到它，但当他们单击时，它将单击您的克隆。单击克隆时，将其设置为

opacity:1

，当其模糊时，将原始输入设置为克隆输入的值，但使用

toLocaleString

。我检查了它在firefox中的工作情况，理论上它也应该在iOS上工作

$（文档）.ready（函数（）{
var$clones=[]；
var numberFields=$（“输入[type='number']”）；
数字字段。每个（函数（i）{
var$clone=$（this.clone（）；
$（this.attr（'type'，'text'）；
var destination=$（this.offset（）；
var width=$（this.width（）；
$clone.push（$clone.css）({
位置：'绝对'，
top:destination.top，
左：目的地，左，
不透明度：“0”，
宽度：宽度
}));
$（this）.after（$clone）；
var=这个；
$clone.on（'focus'，function（）{
$（this.css（'opacity'，'1'）；
});
$clone.on（'blur'，function（）{
$（this.css（'opacity'，'0'）；
$（that.val）（“”+$（this.val（））？parseInt（$（this.val（））.toLocaleString（）：“”）；
});
});
});
我不熟悉numeric.js，但如果我这样做，我只会将数值保存为数据属性，然后使用
.toLocaleString
格式化，记住您可以在
文本
和
数字
类型之间切换，以便显示逗号：

看到iOS的问题，我相信下面的方法会奏效。您可以克隆元素，然后将原始元素设置为
text
输入。然后，获取原始元素的位置，并将新元素设置为绝对位于原始元素上方。现在，将数字输入设置为
opacity:0
，这样您将看不到它，但当他们单击时，它将单击您的克隆。单击克隆时，将其设置为
opacity:1
，当其模糊时，将原始输入设置为克隆输入的值，但使用
toLocaleString
。我检查了它在firefox中的工作情况，理论上它也应该在iOS上工作


$（文档）.ready（函数（）{
var$clones=[]；
var numberFields=$（“输入[type='number']”）；
数字字段。每个（函数（i）{
var$clone=$（this.clone（）；
$（this.attr（'type'，'text'）；
var destination=$（this.offset（）；
var width=$（this.width（）；
$clone.push（$clone.css）({
位置：'绝对'，
top:destination.top，
左：目的地，左，
不透明度：“0”，
宽度：宽度
}));
$（this）.after（$clone）；
var=这个；
$clone.on（'focus'，function（）{
$（this.css（'opacity'，'1'）；
});
$clone.on（'blur'，function（）{
$（this.css（'opacity'，'0'）；
$（that.val）（“”+$（this.val（））？parseInt（$（this.val（））.toLocaleString（）：“”）；
});
});
});
注意：我留下这个原始答案，以防将来这里有什么有用的东西；但请参阅我的另一个答案，这是对原始问题的完整解决方案。

我没有办法完全做我想做的事。在不同的浏览器中，用输入“type”进行fuzing太不一致；而且在iOS上也不起作用（这是90%的原因）。然而，我确实“非常接近”顺利地完成了以下工作。（注意，这使用numeric.js库进行格式化）：

JavaScript:

<script>
$(document).ready(function(){
    var intFields = $("input[data-format=integer]");
    intFields.each( function(){
        $(this).attr( "pattern", "[0-9,]*" );
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
    intFields.focus( function(){
        $(this).val( numeral( $(this).val() ).format('0') );
    });
    intFields.blur( function(){
        $(this).val( numeral( $(this).val() ).format('0,0') );
    });
    $("form#myForm").on( "submit", function(){
        intFields.each( function() {
            $(this).val( numeral( $(this).val() ).format('0') );
        } );
        return true;
    } );
});
</script>


$（文档）.ready（函数（）{
var intFields=$（“输入[数据格式=整数]”）；
intFields.each（函数（）{
$（this.attr（“模式”，“[0-9，]*”）；
$（this.val）（数字（$（this.val（））.format（'0,0'）；
});
intFields.focus（函数（）{
$（this.val）（数字（$（this.val（））.format（'0'）；
});
intFields.blur（函数（）{
$（this.val）（数字（$（this.val（））.format（'0,0'）；
});
$（“form#myForm”）。在（“submit”，function（）上{
intFields.each(
<input type="text" data-format="integer" name="some_number" value="12345678>">