[Mobile] 手机浏览器输入框-数字输入框
手机浏览器的输入框,一直都是以web的方式进行开发的,没有关注到用户体验,领导提出了输入框要弹出数字输入框,想来应该有这种技术能实现。
搜索之后发现可以使用type=”number”实现,此方法在andriod和ios下均能实现效果,以下为使用之后遇到的问题:
1. 使用type=”number”的问题,使用之后无法对输入的长度做控制,以前使用text,可以使用maxlength属性进行长度输入的控制,而变成number之后无法控制,虽然可以设置min和max,但这两个值只是设置输入框的长度最大为多少,而实际输入多长没有限制,因为我们输入的卡号长度是需要控制的
2. 纯数字密码无法解决,如果设置为number,意味着数字会显示出来,而密码框的遮罩效果无法实现,搜索之后没有找到现成的解决方案
构想最后解决办法:
1. 可以使用这个属性,但是需要使用js对输入长度进行控制
2. 后端对提交数据进行校验,并返回告诉用户失败原因
3. 如果对数字输入长度不限制的,可以直接忽略此问题
参考资料:
http://blog.csdn.net/monkey_cool/article/details/18733513
http://www.cnblogs.com/txw1958/p/wap-keyboard.html
http://www.w3school.com.cn/html5/att_input_type.asp
[Mobile] 手机浏览器输入框-数字输入框的更多相关文章
- 解决手机浏览器上input 输入框导致页面放大的问题(记录)
在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...
- WPF数字输入框和IP地址输入框
数字输入框 简介 在业务中,我们经常需要限制用户的输入,比如限制输入长度,限制只能输入数字等等.限制输入长度WPF内置的TextBox已经帮我们解决了,但是限制输入数字却并未在WPF中内置解决方案.使 ...
- WPF自定义数字输入框控件
要求:只能输入数字和小数点,可以设置最大值,最小值,小数点前长度,小数点后长度(支持绑定设置): 代码如下: using System; using System.Collections.Generi ...
- WPF和Expression Blend开发实例:一个样式实现的数字输入框
原文:WPF和Expression Blend开发实例:一个样式实现的数字输入框 今天来一个比较奇淫技巧的手法,很少人用,同时也不推荐太过频繁的使用. 先上样式: <Style x:Key=&q ...
- 动手写个数字输入框1:input[type=number]的遗憾
前言 最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...
- django-xadmin数字输入框不支持小数点小数问题
环境:https://github.com/y2kconnect/xadmin-for-python3.git python3.5.2 django1.9.12 原因:数字输入框用的是html5 in ...
- Vue第一个自定义组件:数字输入框(number-input)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ios端的Safari浏览器中,输入框加入readonly之后,点击还能获取焦点的解决办法。
事情的起因是,新增一个需求,原来的输入框点击不要出现系统自带的键盘,出现我们模拟的键盘.如果是一次性开发的话, 我肯定把这个输入框写成一个div或者其他的元素,然后点击之后出现我们的模拟键盘,这样就不 ...
- Vue(八) 数字输入框组件案例
数字输入框是对普通输入框的扩展,用来快捷输入一个标准的数字,如图: 代码: <div id="app"> <input-number v-model=" ...
随机推荐
- 泛型约束 where T : class,new()
假如有这样一个方法签名 public List<T> GetSomethingList<T> (int a,int b,string c) where T:class,new( ...
- Aufs与Devicemapper的关系
Aufs与Devicemapper的应用 Aufs是Docker最初采用的文件系统,由于Aufs未能加入到Linux内核,考虑到兼容性问题,加入了Devicemapper的支持.目前,除少数版本如Ub ...
- Postman
Postman功能(https://www.getpostman.com/features) 主要用于模拟网络请求包 快速创建请求 回放.管理请求 快速设置网络代理 安装 下载地址:https://w ...
- poj 1011
http://poj.org/problem?id=1011 这是一道POJ的搜索的题目,最开始确实难以理解,但做过一些搜索的题目后,也没那么难了. 大概题意就是,现在有N根木头,要拼成若干根木头,并 ...
- jQuery DataTables && Django serializer
jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...
- http get vs post
http get vs post GET与POST方法有以下区别:(1) 在客户端,Get方式在通过URL提交数据,数据在URL中可以看到:POST方式,数据放置在HTML HEADER内提交.(2) ...
- CEF3开发者系列之JS与C++交互之二
本文翻译自JavaScriptIntegration (https://bitbucket.org/chromiumembedded/cef/wiki/JavaScriptIntegration).本 ...
- Codeforces 55D
基本的数位DP,注意记录那些状态可以用最小的空间判断出整除性. #include <cstdio> #include <cstring> using namespace std ...
- svn: Commit failed (details follow): svn: Authorization failed
我的原因是我没有使用账户密码,匿名用户没有写权限,只有只读的权限 修改下svn配置文件中的anon-access=read为anon-access=write 还有一点要注意:选项前面不能留空格,必须 ...
- FastReport中文网
FastReport中文网 http://www.fastreportcn.com/Article/2.html