输入仅允许小数点后一位

Question

I am trying to format a number upon input, where you can only insert valid numbers. I have everything working except for the decimal. The input box allows me it insert as many decimals as I would like, but I would only like to allow for one (see the last replace() ).

element.oninput = e => {
    let value = e.currentTarget.value;
    let result = value
        // Remove anything that isn't valid in a number
        .replace(/[^0-9-.]/g, '')
        // Remove all dashes unless it is the first character
        .replace(/(?!^)-/g, '')
        // Remove all periods unless it is the last one
        .replace(/(?!)\./g, '');
    element.value = result;
}

https://jsfiddle.net/c4f1L3kv/1/

Here are some valid inputs:

123.123
-123.12
123
-123
.123
-.123

Here are some invalid inputs:

123-123
1-2-3
123.123.123
123-123..12

Answer 1

 var element = document.querySelector('input'); element.oninput = e => { let value = e.currentTarget.value; let result = value .replace(/[^0-9-.]/g, '') .replace(/(?!^)-/g, '') // prevent inserting dots after the first one .replace(/([^.]*\\.[^.]*)\\./g, '$1'); element.value = result; } 

 <input/> 

Answer 2

If you only want to match a period character if it is followed by another period character, then you can use a positive lookahead like in the expression below:

/\.(?=.*\.)/g

Explanation:

• \\. - Match a literal . character
• (?= - Start of a positive lookahead
  • .*\\. - Match zero or more characters until a literal . character.
• ) - Close of the positive lookahead

 var element = document.querySelector('input'); element.addEventListener('input', (event) => { event.target.value = event.target.value // Remove anything that isn't valid in a number .replace(/[^\\d-.]/g, '') // Remove all dashes unless it is the first character .replace(/(?!^)-/g, '') // Remove all periods unless it is the last one .replace(/\\.(?=.*\\.)/g, ''); }); 

 <input type="text" /> 

---

Based on your comment below:

If you would like to prevent the user from adding a period character at the end of the string if a period character is already present, then you could use the expression /(\\..*)\\.$/ and replace the first capturing group with itself, which will effectively remove whatever wasn't in the capturing group (ie, the last period character).

 var element = document.querySelector('input'); element.addEventListener('input', (event) => { event.target.value = event.target.value // Remove anything that isn't valid in a number .replace(/[^\\d-.]/g, '') // Remove all dashes unless it is the first character .replace(/(?!^)-/g, '') // Remove the last period if there is already one .replace(/(\\..*)\\.$/, '$1') // Remove all periods unless it is the last one .replace(/\\.(?=.*\\.)/g, ''); }); 

 <input type="text" />