English 中文(简体)
如何避免投入类型中的下降值
原标题:How to avoid Decimal values in input type number
  • 时间:2016-05-05 06:28:41
  •  标签:
  • html

• 如何避免数字以超文本形式输入数值。 目前,它允许用户对等值进行分类。

问题回答

除提供的答复外,还有一种办法是在投入中监测关键词。 我个人喜欢将<代码>类型=”编号“作为属性。 这里有

<form action="#" method="post">
  Numbers: <input name="num" 
                  type="number"
                  min="1"
                  step="1"
                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                  title="Numbers only">
  <input type="submit">
</form>

用教区为例

<input type="number" oninput="this.value=(parseInt(this.value)||0)" placeholder="0-9" autofocus=   value= 0  />

Based on other answers here, I tried this:

<input id="storeId" min="0" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" title="Must be an integer number" type="number" >

我只是阻止了狗的投入,但再次这并不阻碍过去。

ASCII DOT 。 性质 46

event.key and event.charCode are deprecated features and don t work well with mobile virtual keyboards. I ve done some research and this seems to be the easiest way to make it work.
Tested in Chrome and Firefox on Windows, in Chrome on Android and in Safari on iOS and seems to be working perfectly.

document.getElementById("myInput").addEventListener( beforeinput , e => {
  if (!(Number(e.data) >= 0 && Number(e.data) <= 9)) {
    e.preventDefault();
  }
});
/* unnecessary */
#myInput {
width: 24ch;
}
<input type="number" inputmode="numeric" placeholder="only a number can go here" id="myInput">

顺便说一句,这是我在这里的第一个职位,因此,如果我做任何错误的话,请告诉我。

You guys can try this This function does not allow user to paste unwanted characters and also disallow user to enter .+-E

var inputBox = document.getElementById("inputBox");
            
                var invalidChars = [
                    "-",
                    "+",
                    "e",
                    "."
                ];

                inputBox.addEventListener("input", function() {
                    this.value = this.value.replace(/[e+-.]/gi, "");
                });
                

                inputBox.addEventListener("keydown", function(e) {
                    if (invalidChars.includes(e.key)) {
                        e.preventDefault();
                    }
                });
 
         
<input type="number" id="inputBox" >

......

If error occured in your JS. You can add this ......$(document).ready(function() { code });

<input type="number" onkeypress="return event.charCode >= 48 && event.charCode <= 57"  name="quantity">

Try this :

<input type="number"  value=""  min="0" oninput="this.value=(parseInt(this.value)||0)" onkeypress="return !(event.charCode == 45||event.charCode == 46||event.charCode == 43)"  class="form-control" step="any" />

A simple regex can help sort with this issue .

var re = new regExp( [.]+) ;
if(!re.test(num)){listOfNumbers.push(num)};

在你处理多种文化和解释时,在投入上不要让用户类型成为一种可行的选择。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57 || charCode==46))
        return false;
    return true;     
}

如果有人仍然想找到解决办法,我就在座谈:

const val = 33.15;

console.log(String(val).includes(".")) // true

if(String(val).includes(".")){
   // the number is decimal
} else {
  // the number is not decimal
}

这种办法使用户只插入0到9个数字

<input type="number" name="intero" oninput="this.value = this.value.replace(/[^0-9]/g,   )" />

This worked for me for Angular 16, the sample rejects negative numbers also

 <input matInput type="number" placeholder="Price" required 
                   onkeydown="if(this.key=== . ){this.preventDefault();}"
                   oninput="this.value = Math.abs(this.value.replace(/[^0-9]*/g,  ))">

如果你想要接受负面数字,你可以使用

 <input matInput type="number" placeholder="Price" required formControlName="LimitPrice"
                   onkeydown="if(this.key=== . ){this.preventDefault();}"
                  >

我也遇到了同样的挑战,这里的复文有助于我把它放在桌面上,在文 Android、西里和 Chrome上工作。 我需要投入领域,只接受数字价值而不作弊。 这是我提出的:

<input id="inputField" type="number" inputmode="numeric" pattern="[0-9]*" />
document.getElementById("inputField").addEventListener( beforeinput , event => {
  const char = event.data;
  if (char != null && char !==    && !/^[0-9]*$/.test(char)) {
    event.preventDefault();
  }
});

这与建议。 差异在于,它不允许截断数字,还使后天线受到压力。 值得一提的是,它支持以有效的价值观,但并非无效的价值观。 我希望它能帮助其他人(或至少是我们自己的未来)。

可在上测试。

Not pretty but seems to work. Allows free edit, corrects on lose focus.

范围:100至100

<input 
onblur="val = parseInt(this.value.replace(/[^-0-9]/g,   )) ||   ; this.value = Math.min(Math.max(val, -100), 100);"
oninput="val = parseInt(this.value.replace(/[^-0-9]/g,   )) ||   ; this.value = val ? Math.min(Math.max(val, -100), 100) :   ;">

你在提出问题时应该把你所尝试的内容摆在桌面上。

仅使用注射器,改变以下特性:

step="any"

纽约总部

step="1"
 For Angular Developers:
    
    <input type="number" min="1" (keydown)="keyDown($event)">
    
    keyDown(event) {
        if (event.key ===  .  ||  e  ||  E ) {
          event.preventDefault();
        }
      } 




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签