html5 ,css3, js 常用的一些代码片段

2017-5-24 mubrand HTML5+

禁止input控件输入空格

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


input输入身份证号码

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


input输入电话号码


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




input只能输入数字和点


<input type="tel" class="text" placeholder="请输入金额"  onkeyup="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>

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























标签: html

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1