在前端开发中，我们经常会遇到用户输入手机号的情况，比如手机号注册、登录，收集用户的手机号信息等。如果我们要想把用户体验做到极致，至少要包含以下两条需求：
1. 输入框只能输入数字
2. 输入框最多只能输入11个字符
通常情况下，开发人员的解决方法就是把input标签的type属性设置为number，这样就限制了输入框只能输入数字类型的字符了，然后添加maxlength="11"，限制输入框最多只能输入11个字符。可惜的是，number类型的输入框，不支持maxlength属性。所以两者我们只能取一个，另一个，要用其它的方式来实现。两者，我们选择保留maxlength属性，而第一个需求，我们用其它方式来实现。理由：number类型只能输入数字类型的字符串，但数字类型可不仅仅包括0-9这10个字符，还包括正号、负号、小数点，及字母e（科学计数），所以用number类型并没有完全实现第一条需求。那接下来要做的就是如何自己实现输入框只能输入数字了。
插一点题外话，在测试的过程中，当我们提出一些问题，或是建议的时候，经常会遇到这样的回答：这个东西就是这样的，这个框架就是这样的，言外之意就是：这个需求没法实现，或是没有必要实现。就比如上面的这个问题，使用number类型的输入框，还是可以输入一些非数字，问题反馈给开发，基本上都会说，number类型就是这样的，然后他们就可以心安理得的忽略掉这个问题。而我想说的是，面对一个问题，最起码的态度，应该是先尝试着去解决，而不是用自己现有的知识去判断能不能做。当你拒绝一个需求时，也是在拒绝一次学习的机会。一次拒绝，两次拒绝，当拒绝成为一种习惯，那么到最后，你就只能用自己掌握的知识去解决问题，无法创设性的去解决问题了。
言归正传。首先，我们能想到的就是给输入框添加键盘抬起事件，在键盘抬起时，把非数字的字符去掉，完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('input').keyup(function(){
$(this).val($(this).val().replace(/\D/g, ''));
});
});
</script>
</head>
<body>
<input />
</body>
</html>这里我是使用jquery写的代码，这样是可以实现需求，但也有一些问题。当我们在输入框中输入非数字的时候，会看到在输入框中显示我们输入的内容，然后又删掉了。更重要的是，在移动端，根本就没有键盘抬起事件。
有问题，那就得解决啊，对于第一点，我原先考虑过，通过键值来判断用户按了什么键，然后在显示到输入框之前，进行处理。也就是如果用户按的键是0-9，那么就让输入的内容，显示到输入框中，否则就丢弃掉。具体的实现，我没有做笔记，因为这个方法达不到需求，所以没有做笔记。这个方法的缺陷也很明显，如果是组合按钮，就会有问题，比如shift+1，那个叹号还是会输入到输入框中，还有复制粘贴的问题。一时之间，想不到解决的方法了，我就先考虑第二个问题。移动端没有键盘抬起事件，于是就想到了change事件，change事件，是在输入框的内容发生改变的时候触发。但是，它的触发还需要一个条件，那就是在输入框失去焦点时，也存在问题。
到这里，似乎已经山穷水尽了，何处去找柳暗花明？难道要就这样放弃？我可不是一个轻易放弃的人，不然，别人也不会用固执来形容我了。于是，又是各种找啊，各种尝试啊，当然，在这个过程中，让我学习到了很多的知识，最后，终于让我找到了解决方法。那就是在jquery里面有个input propertychange方法，当然这个方法是做了兼容的，IE有onpropertychange方法，其它浏览器有oninput方法。那么实现的代码如下
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$(function(){
$('input').on('input propertychange', function(){
$(this).val($(this).val().replace(/\D/g, ''));
});
});
</script>
</head>
<body>
<input />
</body>
</html>这样，就实现了用js控制输入框只能输入数字了。方法有了，那么要让别人用，就需要让别人用起来简单，越简单越好了。于是，我们就新建一个js文件，就叫util.js吧，然后在里面写入以下代码
(function(){
$(document).on('input propertychange', '.num', function(){
$(this).val($(this).val().replace(/\D/g, ''));
}).on('input propertychange', '.word', function(){
$(this).val($(this).val().replace(/[^0-9a-zA-Z]/g, ''))
});
})();保存，然后我们在html文件中引入，那么给input添加num的class，那么这个输入框就只能输入数字了，添加word的class，那么输入框就只能输入数字和字母了，这样是不是很方便呢
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script src="util.js"></script>
</head>
<body>
<input class="num" maxlength="11" />
<input class="word" />
</body>
</html>这样的话，第一个输入框，就只能输入数字，并且最多只能输入11个字符。第二个输入框只能输入数字或字母了。
当我们解决一个问题的时候，可能需要费尽心思，上下求索。但是在这个过程里，我们会遇到很多之前没有接触过的知识，而这些知识，也许就是你以后遇到的某一个问题的解决方案，这就是经验的累积。
在后面的博客里，我会运用前端+java来简单实现一个电子商城的后台管理系统。前端和java我都是自学的，而且都没有全学完，所以面向的还是初学者吧。欢迎大家关注哦！