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

21 篇文章 0 订阅

禁止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;
				});
			});



 



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值