html5 ,css3, js 一些要很实用的代码片
2016-06-12 10:21
459 查看
禁止input控件输入空格
input输入身份证号码
input输入电话号码
input只能输入数字和点
以上input只能控制键盘输入的时候进行过滤,如果在粘贴的时候可以使用paste事件,注意,需要使用setTimeout来获取input的内容
text-align:right在Android4.4(或某些浏览器下)以下,使用placeholder无法居右
更改placeholder颜色
iphone的safari下,overflow:hidden无效
移动设备上使用伪元素 :after :before来实现边框
让绝对定位的元素垂直水平居中
ios中input控件默认带有阴影圆角属性,尤其是button还自带渐变效果,为了样式统一,可以在css中这样设置
移动端开发的时候,适应不同分辨率,可以使用rem作为单位,rem是一个相对长度单位,相对根元素html的大小,在 iphone6 上使用 1rem = 20px 来换算。小于 375px 的设备上不做缩小处理,对 大于 375px 宽度的设备进行等比缩放。
禁止在页面点击
<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></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; }); });
相关文章推荐
- 初探JavaScript——JS另类的作用域和声明提前。
- 使用Script元素发送JSONP请求的方法
- JavaScript获取IP获取的是IPV6 如何校验
- firfox插件开发中,js调用NPAPI无返回值的问题
- 兼容所有浏览器的复制到剪切板功能,悬浮层不能复制问题解决
- Javascript简写条件语句(推荐)
- 跟着9张思维导图学习Javascript
- JavaScript 练习题
- JavaScript_ECMA5数组新特性详解
- js数组的操作
- JS 监控浏览器关闭时提醒
- jsp中的form表单中的 id和name有什么区别了
- 浅谈JavaScript变量的自动转换和语句
- 各种浏览器开启JavaScript脚本方法
- Sencha ExtJS 6 Widget Grid 入门
- javascript, zepto, zepto.js, 移动js类库
- 如何通过Html生成JSON格式字符串
- Jsp与servlet的区别
- Merge Two Sorted List
- 日期联动框