有什么方法可以防止输入type ="number"获得多个点值? [英] Is there any way to prevent input type=“number” getting more than one dot values?

问题描述

我只想获取诸如1.5、0.56等的十进制值，但是它允许多个点.有什么办法可以防止它

解决方案

最初在此处共享

您可以在此Codepen中找到非常详细的说明

此解决方案很简单，并且在数字字段中仅允许一个点.这不会阻止您单击数字并在." 之前添加数字.它不会阻止执行浏览器的键盘快捷键，例如刷新，复制和粘贴(只要粘贴的值是有效数字)以及其他功能.它将允许在数字的正文中添加." ，但会删除超出设置限制的任何超出的浮点数.

我仍然无法阻止的唯一行为是，如果您反复按输入末尾的点号键，则点号会闪烁开和关.发生这种情况的原因是键入的值"13." 是有效数字，并返回"13" 和键入的值"13 .." 不是，并返回".在我的解决方案中，如果一个值返回" 而没有按下退格键或删除键，则该值将回滚到最后一个有效值，该值为"13" ，该值是从键入的值"13." .

我尝试过这样的解决方案:如果一次按下一个点，可以防止再次触发该点，但是每次我设法在紧接一个已经存在的点之后紧紧按一下该点，然后什么也没有得到，然后得到除非我先按任何其他键，否则无法输入点.

我认为多次按下按钮闪烁是最好的解决方案，因为这样用户根本无法输入点并且什么也没发生.

  let lastValidInputValue;让selectedDot = false;const onKeypress =(e)=>{if(e.key ===."&& e.target.value.indexOf(.")！== -1&&！selectedDot)e.preventDefault();selectedDot = false;如果(e.key ==="e")e.preventDefault();};const onInput =(e)=>{如果 (e.target.value.indexOf(.")<e.target.value.length-e.target.getAttribute("data-toFixed")-1&&e.target.value.indexOf(.")！== -1){让newValue;newValue = e.target.value.slice(0，e.target.value.indexOf(.")+parseInt(e.target.getAttribute("data-toFixed"))+1个);newValue = parseFloat(newValue);e.target.value = newValue;}如果(e.target.value！=="){lastValidInputValue = e.target.value;} else if(e.inputType.match(/delete/g)){lastValidInputValue =";} 别的 {e.target.value = lastValidInputValue;}};const onSelect =(e)=>{if(window.getSelection().toString().indexOf(.")> -1)selectedDot = true;}  

 <输入类型="number" id ="myNumber" name ="myNumber" data-toFixed ="2" step ="any"onkeypress =" onKeypress(event)"oninput =" onInput(event)"onselect =" onSelect(event)>  

I want to get only decimal values like 1.5,0.56 etc. but its allowing more than one dot. is there any way to prevent it

解决方案

Originally shared here

You can find very detailed explainations in this Codepen

This solution is simple and will only allow one dot in the number field. It doesn't prevent from clicking back in the number and adding numbers before the ".". It doesn't prevent from executing browser keyboard shortcuts like refresh, copy and pasting (as long as the pasted value is a valid number) and others. It will allow to add "." withing the body of the number, but will remove any exceeding floats over the set limit.

The only behavior that I still can't prevent is if you press the dot key at the end of the input repeatedly, the dot will blink on and off. This happens because a typed value of "13." is a valid number and returns "13" and a typed value of "13.." is not and returns "". In my solution, if a value returns "" without the press of backspace or delete, it gets rolled back to the last valid value, wich is "13", obtained from the typed value "13.".

I've tried solutions where if a dot was pressed once, it was prevented to be triggered a second time, but every time I managed to get stuck with pressing the dot right after an already existing dot followed by nothing and then get stuck with not being able to type a dot unless I pressed any other key first.

I think the blinking on multiple press is the best solution for ther's no way a user would type a dot and nothing happens.

let lastValidInputValue;
let selectedDot = false;


const onKeypress = (e) => {
  if (e.key === "." && e.target.value.indexOf(".") !== -1 && !selectedDot) e.preventDefault();
  selectedDot = false;

  if (e.key === "e") e.preventDefault();
};


const onInput = (e) => {
  if (
    e.target.value.indexOf(".") < e.target.value.length - e.target.getAttribute("data-toFixed") - 1 &&
    e.target.value.indexOf(".") !== -1
  ) {
    let newValue;
    newValue = e.target.value.slice(
      0,
      e.target.value.indexOf(".") +
        parseInt(e.target.getAttribute("data-toFixed")) +
        1
    );
    newValue = parseFloat(newValue);
    e.target.value = newValue;
  }
  if (e.target.value !== "") {
    lastValidInputValue = e.target.value;
  } else if (e.inputType.match(/delete/g)) {
    lastValidInputValue = "";
  } else {
    e.target.value = lastValidInputValue;
  }
};

 const onSelect = (e) => {
   if(window.getSelection().toString().indexOf(".") > -1) selectedDot = true;
 }

<input type="number" id="myNumber" name="myNumber" data-toFixed="2" step="any" onkeypress="onKeypress(event)" oninput="onInput(event)" onselect="onSelect(event)">

这篇关于有什么方法可以防止输入type ="number"获得多个点值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！