html5 ,css3, js 常用的一些代码片段
禁止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
