<input type="number" id="input-age" placeholder="请输入你的年龄"  />  //input 输入框,要求出入年龄,位数不能超过2位;
$('#input-age').on('input',function(e){
e.preventDefault();
var a=$('#input-age').val();
var reg = /^\d+$/g;
$('#input-age').attr('type','text');
if(reg.test(e.target.value)){
if(e.target.value.length >2){
$('#input-age').val(e.target.value.slice(0,2));
} }else{
if(reg.test(a.slice(0,2))){
$('#input-age').val(a.slice(0,2));
}else{
$('#input-age').val('');
} }
}); $('#input-age').on('blur',function(e){
e.preventDefault();
$('#input-age').attr('type','number');
});

移动端 输入框 如果类型是number,用户也可以输入汉字和字母的更多相关文章

  1. 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头

    一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...

  2. [HTML] css3 输入框input类型为number时,去掉上下箭头方式

    <input type="number" ...> <style> input::-webkit-outer-spin-button, input::-we ...

  3. 在Chrome与火狐中,输入框input类型为number时,如何去除掉的自带的上下默认箭头

    如何移除input='number'时浏览器自带的上下箭头: CSS样式: /* 去除input[type=number]浏览器默认的icon显示 */ input::-webkit-outer-sp ...

  4. 协议端口号(protocol port number)

    协议端口号(protocol port number) 先来个注意事项 (-> ->) 这种在协议层间的抽象的协议端口是软件端口,和硬件端口是完全不同的概念.硬件端口是不同设备进行交互的接 ...

  5. JavaScript封装方法,兼容参数类型为Number和String

    /** * 依据Kind确定跳转到目标列表页面. * @param kind */ function gobackByKind(kind) { var kindStr = String(kind); ...

  6. input输入框type设置为number,maxlength无效

    一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...

  7. input 类型为number型时,maxlength不生效?

    input 类型为number型时,maxlength不生效? 可以加oninput属性来控制最大长度:<input id="numInput" type="num ...

  8. python小白——进阶之路——day3天-———容器类型数据+Number类型强制类型转换

    -->Number 部分 int :     整型   浮点型 布尔类型  纯数字字符串 float:    整型   浮点型 布尔类型  纯数字字符串 complex:  整型   浮点型 布 ...

  9. js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

随机推荐

  1. border-radius bug 收集

    border-radius我相信对于老一辈的前端们有着特殊的感情,在经历了没有圆角的蛮荒时代,到如今 CSS3 遍地开花,我们还是很幸福的. 然而即使到了三星大脸流行时代,border-radius在 ...

  2. SpringBoot入门篇--热部署

    在项目的开发过程中我们难免会涉及到对代码的修改,有bug我们也需要对代码进行修改,这时候我们就需要重启服务器.但是,我们知道的是这个过程是相当的痛苦的,重启服务器涉及到了所有资源的重新加载,过程那是相 ...

  3. JS 更新

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  4. swagger配置

    1.pom.xml <!--swagger2--> <dependency> <groupId>io.springfox</groupId> <a ...

  5. OpenCL 图像卷积 3 使用 CPU

    ▶ CPU 图像卷积,共四种方法.分别为基本串行,使用模板,使用局部内存,使用AVX指令优化 ● 全部的代码,仅在主函数中选择调用的函数名即可. #include <stdio.h> #i ...

  6. leetcode122

    public class Solution { public int MaxProfit(int[] prices) { var list = new List<KeyValuePair< ...

  7. 2.mybatis实战教程(mybatis in action)之二:以接口的方式编程

    转自:http://www.yihaomen.com/article/java/304.htm 前面一章,已经搭建好了eclipse,mybatis,mysql的环境,并且实现了一个简单的查询. 请注 ...

  8. Windows下MySQL5.6查找my.ini配置文件

    在DOS命令行窗口登录MySQL,输入如下命令查看MySQL的安装目录和数据存放目录,MySQL的配置文件就在数据存放目录下: 另外一种方法: 在"开始 → 所有程序 → MySQL&quo ...

  9. fb 更新sdk

    flash兼容flex.fb的sdk,但fb不一定兼容flash的sdk,那么直接将flash的sdk解压覆盖掉fb的sdk,就可以打开了. fb更新sdk方法: 1.找到(安装目录+eclipse\ ...

  10. jdk下载--操作系统

    不同的操作系统需要下载不同的jdk. 查看操作系统的命令: Window系统下:>winver Linux和Unix系统下: >uname -a 根据系统不同选用不同的jdk: 下载地址: ...