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">div>
div>

<script src="./index.js">script>

---

function inputCharactersOtherThanChineseCharacters(obj) {
	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">div>
div>

---

function positiveInteger(obj) {
	// 当数值长度大于等于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">div>
div>

---

function aumbersAndLetters(obj) {
	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">div>
div>

---

function floatingPointNumber(obj) {
	// 当整数部分长度大于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、效果演示

小程序码

---

普通二维码