html中input框怎么能设置为只能输入数字,设置type=number时,右边会出现上下按键

html-css0116

html中input框怎么能设置为只能输入数字,设置type=number时,右边会出现上下按键,第1张

可以设置成type="tel",可输入数字又没有上下箭头

添加css进行样式控制

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button{

-webkit-appearance: none

margin: 0

}

input[type="number"]{-moz-appearance:textfield}

移动开发不同手机弹出数字键盘问题 最近在做手机页面时,遇到数字输入的键盘的问题,之前的做法只是一刀切的使用 type="tel",不过一直觉得九宫格的电话号码键盘上的英文字母太碍事了。于是想要尝试其它的实现方案,最终的结论却令人沮丧。不过也趁机详细了解了下pattern这个属性。 type="tel" 和 type="number" 的区别

这里还是先那么先交代一下最初遇到的问题。其实无论是tel还是number都不是完美的:

type="tel"

手机页面设计一般的大小是640,但是,手机屏幕大小确实不确定的,这样,怎么才能做出适应所有手机的手机页面呢?

一般的解决方案有两种,rem布局和百分比布局。这两种方案我有都试过,所以现在更推荐用rem布局来制作手机页面

rem布局的兼容性:

Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+、ie6-ie8 还是别用rem

不过现在的手机一般浏览器,一般可以直接不用去管IE内核的浏览器了。

REM的计算公式

例:html 设置font-size:16px 1rem = 16px

那么640px = 640/16 =40rem

个人建议设置为100px 方便计算

首先,给页面的html定义一个100px的

html{ font-size:100px}/*设定基础rem*/

然后,最核心的代码就是这一段js运算了,根据页面的大小来控制基础rem的值;

new function (){

var _self = this

_self.width = 640//设置默认最大宽度

_self.fontSize = 100//默认字体大小

_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}

_self.changePage = function(){

document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")

}

_self.changePage()

window.addEventListener("resize",function(){_self.changePage()},false)

}

demo

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<meta charset="utf-8">

<title>rem基础布局</title>

<script type="text/javascript">

new function (){

var _self = this

_self.width = 640//设置默认最大宽度

_self.fontSize = 100//默认字体大小

_self.widthProportion = function(){var p = (document.body&&document.body.clientWidthdocument.getElementsByTagName("html")[0].offsetWidth)/_self.widthreturn p>1?1:p<0.5?0.5:p}

_self.changePage = function(){

document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important")

}

_self.changePage()

window.addEventListener("resize",function(){_self.changePage()},false)

}

</script>

<style type="text/css">

/*=== base style===*/

*{margin: 0pxpadding: 0px}

ul{list-style: none}

.wrap{min-width: 320pxmax-width: 640pxwidth: 100%margin: 0px autobackground: #2a6acefont-family:"微软雅黑", "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-seriffont-size: 12px}/*适用于手机端:字体大小用em,1em=16px;为默认字体大小最大宽度640*/

.pro{width:6.2remmargin: 0px autopadding-top: 20pxoverflow: hidden}

.clearfix:after {content:""height:0display:blockclear:both}

.clearfix {zoom:1}

.pro ul{width:6.4rem}

.pro li{width: 3remheight: 3.6remfloat: leftmargin: 0 0.2rem 0.2rem 0}

.pro li .box{width: 3remheight: 3rembackground: #ccc}

.pro li p{font-size: 0.24remline-height: 0.6remtext-align: center}

</style>

</head>

<body>

<div class="wrap">

<div class="pro">

<ul class="clearfix">

<li><div class="box"></div><p>区块文案</p></li>

<li><div class="box"></div><p>区块文案</p></li>

<li><div class="box"></div><p>区块文案</p></li>

<li><div class="box"></div><p>区块文案</p></li>

<li><div class="box"></div><p>区块文案</p></li>

</ul>

</div>

</div>

</body>

</html>