【小笔记】阻止冒泡 & 浏览器兼容 & 多行显示 & 算页码 & 获取头部参数 & 改变input、textarea的placeholder样式

阻止冒泡:
$(".xxx").bind("click", function() {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
})

阻止冒泡兼容火狐等大部分浏览器:

//给弹出层绑定点击事件,阻止冒泡2
$(".dbuybody").bind("click", function(e) {
preventBubble();
// window.event ? window.event.cancelBubble = true : e.stopPropagation();
})

function preventBubble(event) {
var e = arguments.callee.caller.arguments[0] || event; //若省略此句,下面的e改为event,IE运行可以,但是其他浏览器就不兼容
if (e && e.stopPropagation) {
e.stopPropagation();
} else if (window.event) {
window.event.cancelBubble = true;
}
}


兼容ie7的display: inline-block;
加上*zoom: 1;*display: inline;

 

多行显示限制:
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
flex-direction: column;
text-overflow: ellipsis;

算页码:
var pages = Math.ceil(count / limit);

 

获取头部参数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //获得页面url的某个url参数的方法
var r = window.location.search.substr(1).match(reg); //从问号 (?) 开始的 URL(查询部分)
if (r != null) return decodeURI(r[2]); return null; //decodeURI(URIstring) 对一个编码后的URI进行解码
}


^匹配字符串开头,&就是&字符
(^|&)匹配字符串开头或者&字符,如果其后还有正则,那么必须出现在字符串开始或&字符之后

 

input、textarea的placeholder如果改变样式:

input:-ms-input-placeholder,
                        textarea:-ms-input-placeholder {
                            font-size: 14px;
                            font-weight: 500;
                            color: #999999;
                            line-height: 1; 
                        }
                        input::-webkit-input-placeholder,
                        textarea::-webkit-input-placeholder {
                            font-size: 14px;
                            font-weight: 500;
                            color: #999999;
                            line-height: 1;
                        }
                        input:-moz-placeholder,
                        textarea:-moz-placeholder {
                            font-size: 14px;
                            font-weight: 500;
                            color: #999999;
                            line-height: 1;
                        }
                        input::-moz-placeholder,
                        textarea::-moz-placeholder {
                            font-size: 14px;
                            font-weight: 500;
                            color: #999999;
                            line-height: 1;
                        }

此时发现火狐浏览器下placeholder偏上,为了兼容火狐只能写死line-height来解决,但是ios的Safari容易不兼容,需要重新规定ios下的line-height

 

posted @ 2019-01-25 15:50  芝麻小仙女  阅读(141)  评论(0编辑  收藏  举报