HTML输入类型数字千位分隔符 [英] HTML Input type number Thousand separator

问题描述

我想在我的输入字段中有一千个分隔符（例如1,000,000）。但是，必须是数字类型，因为我需要能够使用步骤调整其值。代码：

 < input type =numberid ='myNumber'value =40,000step ='100'> ; 
  

我尝试使用Javascript来调整值，但没有奏效。任何帮助，将不胜感激。谢谢！

解决方案

您可以使用伪元素来显示逗号版本来伪造此功能。
$ b

  div [comma-value] {
 position：relative; 
} 
 div [comma-value]：之前{
 content：attr（comma-value）; 
位置：绝对; 
剩下：0; 
} 
 div [comma-value] input {
 color：#fff; 
 
 
 
 
 
 $ b 
包装div是必需的，因为输入不能包含伪元素。 p> 
 
 
 < div> 
< input type =numberid ='myNumber'value =40000step ='100'> 
< / div> 
  
还有一点JavaScript可以在每个第三个字符中插入逗号
  myNumber.value = commify（myNumber.value）
 myNumber.addEventListener（change，function（）{
 commify（event.target .value）
}）
 
函数commify（value）{
 var chars = value.split（）。reverse（）
 var withCommas = [] （i = 1; i< = chars.length; i ++）{
 withCommas.push（chars [i-1]）$ ​​b $ b if（i％3 == 0& amp; ;& i！= chars.length）{
 withCommas.push（，）
} 
} 
 var val = withCommas.reverse（）。join（ ）
 myNumber.parentNode.setAttribute（comma-value，val）
} 
  
查看小提琴 
 
I want to have a thousand separator (e.g. 1,000,000) in my Input field. However, it has to be of type number because I need to be able to adjust its value using "step". Code:
<input type="number" id='myNumber' value="40,000" step='100'>
I tried using Javascript to adjust the value but didn't work. Any help would be appreciated. Thanks!
解决方案
You can fake this functionality by using a pseudo-element to display the comma version.
div[comma-value]{
  position:relative;
}
div[comma-value]:before{
  content: attr(comma-value);
  position:absolute;
  left:0;
}
div[comma-value] input{
  color:#fff;
}
A wrapping div is required because inputs can't have pseudo elements.
<div>
  <input type="number" id='myNumber' value="40000" step='100'>
</div>
And a little bit of JavaScript to insert commas every third character
myNumber.value = commify(myNumber.value)
myNumber.addEventListener("change", function(){
  commify(event.target.value)
})

function commify(value){
  var chars = value.split("").reverse()
  var withCommas = []
  for(var i = 1; i <= chars.length; i++ ){
    withCommas.push(chars[i-1])
    if(i%3==0 && i != chars.length ){  
      withCommas.push(",")
    }
  }
  var val = withCommas.reverse().join("")
  myNumber.parentNode.setAttribute("comma-value",val)
}
Check out the fiddle

                        
这篇关于HTML输入类型数字千位分隔符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！