js控制input输入框的方法封装(数字，中文，字母，浮点数等)

最新推荐文章于 2025-02-20 17:16:35 发布

最新推荐文章于 2025-02-20 17:16:35 发布 · 663 阅读

文章标签：

#javascript js

本文介绍了如何在项目开发中通过input标签上的属性限制输入格式，以提高用户体验，包括数字、中文、字母、浮点数等类型输入的限制。

在项目开发的时候，经常有一些输入框，控制输入的格式，而不是等输入好了再去检查格式，格式错了就报错，体验不好。

/** 数字，中文，字母,浮点数(+/-/.) 类型输入限制，只要在input标签上加上 jInput="number,chinese,alphabet,floating" 备注：floating属性只能单独用*/

function limitInptFormat(){
    var inputType=['number','chinese','alphabet','floating'];

	$('body').delegate("input[jInput]", "keyup", function(e) {
		var input_type = $(this).attr('jInput').split(',')
		var value = $(this).val();
		if (!input_type && input_type.length <= 0) {
			return;
		}
		var values_of_type = [];
		var RegStr = '^[';
		for (var i = 0; i < input_type.length; i++) {
			if (input_type[i]) {
				if (input_type[i] == 'number') {
					RegStr += '\\d';
				} else if (input_type[i] == 'chinese') {
					RegStr += '\\u4e00-\\u9fa5';
				} else if (input_type[i] == 'alphabet') {
					RegStr += 'a-zA-Z';
				} else if (input_type[i] == 'floating') {
					RegStr = '^[\\+\\-]?\\d+\\.?\\d+';
					$(this).val(value.match(new RegExp(RegStr, 'g')));
					return;
				}
			}
		}
		RegStr += ']*';
		if (RegStr.length <= 3) {
			return;
		}
		var expression = new RegExp(RegStr, 'g');
		var return_value = value.match(expression);
		$(this).val(return_value);
	});
}