HTML+JavaScript实现input框输入控制、多种输入控制

1、价格输入

<input type="text" name="je" onkeyup="priceInput(this)" /> 

function priceInput(obj) { // 清除数字和点以外的字符 obj.value = obj.value.replace(/[^\d.]/g, ""); // 验证第一个字符是否是数字，也就是是第一个字符不能是点 obj.value = obj.value.replace(/^\./g, ""); // 只保留第一个点, 清除多余的点 obj.value = obj.value.replace(/\.{2,}/g, "."); obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 只能输入两个小数 obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 此处控制的是如果没有小数点，首位不能为0，类似于01、02的金额 if (obj.value.indexOf(".") < 0 && obj.value != "") { if (obj.value.substr(0, 1) == '0' && obj.value.length == 2) { obj.value = parseFloat(obj.value); } } else { // 此处控制的是如果有小数点，整数如果大于等于两位，第一位不能为0，类似于01.16、02.77的金额 let val = obj.value, beforePoint = val.split('.')[0], afterPoint = val.split('.')[1]; if (beforePoint.length >= 2 && beforePoint[0] == 0) { obj.value = `${beforePoint.substring(1)}.${afterPoint}`; } } } 

2、输入除了汉字以外的字符。例如，路径、链接、地址

<div> <input type="text" onkeyup="inputCharactersOtherThanChineseCharacters(this)"> <div id="idBox"> let val = obj.value.replace(/[\u4E00-\u9FA5]/g, ""); document.getElementById('idBox').innerText = val; obj.value = val; } 

3、正整数的输入，当数值长度大于等于2时，第一位不能为0

<div> <input maxlength="7" type="text" placeholder="正整数的输入，且第一个不能为0，不能输入小数点" oninput="positiveInteger(this)"> <div id="idBox"> // 当数值长度大于等于2时，第一位不能为0 obj.value = obj.value.replace(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/g, "$1"); // 输入0-9的整数，其他的除外 obj.value = obj.value.replace(/[^0-9]/g, ''); document.getElementById('idBox').innerText = obj.value; } 

4、限制只能输入数字和字母

<div> <input maxlength="7" type="text" placeholder="请输入数字或字母" oninput="aumbersAndLetters(this)" /> <div id="idBox"> obj.value = obj.value.replace(/[\W]/g, ""); document.getElementById('idBox').innerText = obj.value; } 

5、浮点数、两位小数点

<div> <input type="text" placeholder="请输入" onkeyup="floatingPointNumber(this)"> <div id="idBox"> // 当整数部分长度大于1时，首位字符不能为0 obj.value = obj.value.replace(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/g, "$1"); // 去除非数字符，除了数字和点 obj.value = obj.value.replace(/[^\d\.]/g, ""); // 校验第一个为数字而不是点 obj.value = obj.value.replace(/^\./g, "0."); // 保证只有出现一个.而没有多个. obj.value = obj.value.replace(/\.{2,}/g, "."); // 保证.只出现一次，而不能出现两次以上 obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", "."); // 只能输入两个小数 obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); document.getElementById('idBox').innerText = obj.value; } 

6、整数的输入，包括负整数

null

null 

7、浮点数的输入，包括负浮点数

null

null 

8、相关链接

CSDN-input框各种输入框限制总结

9、效果演示

小程序码

普通二维码