html5 ,css3, js 一些要很实用的代码片

禁止input控件输入空格

<input type="password" class="text" placeholder="请输入密码" οnkeyup="this.value=this.value.replace(/^ +| +$/g,'')"/>

input输入身份证号码

<input type="number" class="text" placeholder="请输入身份证号" maxlength="18" οnkeyup="value=value.replace(/[^0-9xX]/g,'')"/>

input输入电话号码

<input type="tel" class="text" placeholder="请输入手机号码" maxlength="11" οnkeyup="value=value.replace(/[^0-9]/g,'')"/>

input只能输入数字和点

<input type="tel" class="text" placeholder="请输入金额"  οnkeyup="value=value.replace(/[^0-9.]/g,'')"/>

以上input只能控制键盘输入的时候进行过滤，如果在粘贴的时候可以使用paste事件，注意，需要使用setTimeout来获取input的内容

$(".text").bind("paste", function() {
				var el = $(this);
				setTimeout(function() {
					var text = $(el).val();
					text = text.replace(/\D/g,'');
					$(el).val(text);
				}, 100);
			});

text-align:right在Android4.4（或某些浏览器下）以下，使用placeholder无法居右

::-webkit-input-placeholder { /* WebKit browsers */ direction: rtl;}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ direction: rtl;}
::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */ direction: rtl;}
:-ms-input-placeholder { /* Internet Explorer 10+ */ direction: rtl;} 

更改placeholder颜色

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #c3c3c3; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #c3c3c3; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #c3c3c3; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #c3c3c3; 
}

iphone的safari下，overflow：hidden无效

body {
	position: relative;
	overflow-x: hidden;
}

移动设备上使用伪元素  :after   :before来实现边框

.border:before{
		    position: absolute;
		    height: 1px;
		    left:0;
		    right:0;
		    top:1px;
		    content: '';
		    -webkit-transform: scaleY(.5);/*缩放：最终边框高度0.5px*/
		    transform: scaleY(.5);
		    background-color: #eee;
		}
.border:after{
		    position: absolute;
		    height: 1px;
		    left:0;
		    right:0;
		    bottom:1px;
		    content: '';
		    -webkit-transform: scaleY(.5);/*缩放：最终边框高度0.5px*/
		    transform: scaleY(.5);
		    background-color: #eee;
		}

让绝对定位的元素垂直水平居中

                /**方式一**/
		.box2{
			position: absolute;
			width:100px;
			height: 100px;
			border:1px solid red;
			margin: auto;
			left:0;
			top:0;
			right:0;
			bottom: 0;
		}
		/**方式二**/
		.box3{
			position: absolute;
			width:100px;
			height: 100px;
			left:50%;
			top:50%;
			transform:  translate(-50%,-50%);
			border:1px solid red;
		}

/**方式三**/
.box4{
position:absolute;top:0;right:1rem;bottom:0;left:1rem;margin:auto;width:9rem
}

html5 打开手机QQ,不需要加好友就能发送消息,前提是对方允许发起临时会话，android，ios都适用，不过在android上回提示，允许一次还是始终打开外部应用。

<a href="mqqwpa://im/chat?chat_type=crm&uin=123456&version=1&src_type=web&web_src=http://undefined">qq公众号</a></span>

		
		<a href="mqqapi://card/show_pslcard?src_type=internal&version=1&uin=123456&card_type=group&source=qrcode">打开qq群</a>
		
		<a href="mqqwpa://im/chat?chat_type=wpa&uin=123456&version=1&src_type=web&web_src=http://m.haishiit.com/">好友聊天</a>

ios中input控件默认带有阴影圆角属性，尤其是button还自带渐变效果，为了样式统一，可以在css中这样设置

* {
				margin: 0;
				padding: 0;
				-webkit-tap-highlight-color: transparent;/*去除点击时背景高亮*/
				-webkit-appearance: none;/*去除ios默认样式*/
				outline: none;/*去除chrome中input获得焦点时候，边框高亮*/
			}

移动端开发的时候，适应不同分辨率，可以使用rem作为单位，rem是一个相对长度单位，相对根元素html的大小，在 iphone6 上使用 1rem = 20px 来换算。小于 375px 的设备上不做缩小处理，对 大于 375px 宽度的设备进行等比缩放。

html {
				font-size: 20px;
			}
			
			@media only screen and (min-width: 400px){ 
				html {
				font-size: 21.33333333px !important;}
			}
			@media only screen and (min-width: 414px) {
				html {
				font-size: 22.08px !important;}
			}
			
			@media only screen and (min-width: 480px){
				 html {
					font-size: 25.6px !important;
				}
			}

禁止在页面点击

$(document).ready(function() {
				$(document).bind("contextmenu", function(e) {
					return false;
				});
			});