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

Posted 2022-01-06 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+JavaScript实现input框输入控制多种输入控制相关的知识，希望对你有一定的参考价值。

1、价格输入
2、输入除了汉字以外的字符。例如，路径、链接、地址
3、正整数的输入，当数值长度大于等于2时，第一位不能为0
4、限制只能输入数字和字母
5、浮点数、两位小数点
6、整数的输入，包括负整数
7、浮点数的输入，包括负浮点数
8、相关链接

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;