24、移动端禁止长按弹出默认菜单
*{
-webkit-touch-callout:none;/*系统默认菜单被禁用*/
-webkit-user-select:none;/*webkit浏览器*/
-khtml-user-select:none;/*早起浏览器*/
-moz-user-select:none;/*火狐浏览器*/
-ms-user-select:none;/*IE浏览器*/
user-select:none;/*用户是否能够选中文本*/
}//阻止移动端长按按钮弹出默认菜单
window.ontouchstart = function(e) {
e.preventDefault();
};
$('.btn').bind('contextmenu', function(e) {
e.preventDefault();
})23、H5页面 input禁止弹出键盘
$('#t').on("focus",function(){
document.activeElement.blur();//屏蔽默认键盘弹出；
});22、判断浏览器是PC端、ipad端还是手机端
var os = function (){
var ua = navigator.userAgent,
isWindowsPhone = /(?:Windows Phone)/.test(ua),
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
isAndroid = /(?:Android)/.test(ua),
isFireFox = /(?:Firefox)/.test(ua),
isChrome = /(?:Chrome|CriOS)/.test(ua),
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
isPc = !isPhone && !isAndroid && !isSymbian;
return {
isTablet: isTablet,
isPhone: isPhone,
isAndroid: isAndroid,
isPc: isPc
};
}();
if (os.isAndroid || os.isPhone) {
// 手机
} else if (os.isTablet) {
// 平板
} else if (os.isPc) {
// pc
}21、 el-dropdown-item的点击事件
直接在el-dropdown-item上添加click事件，点击后没有任何反应。若在click后添加native修饰符，则可解决问题。代码如下：
<el-dropdown>
<span class="user"></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="logoutFn">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>20、 elementui关闭弹窗清空表单验证 清空表单
<el-form ref="paper"></el-form>调用方法，注意先清空验证再清空表单，这样就可以清除自定义的表单验证器了：
this.$refs.paper.clearValidate();
this.$refs.paper.resetFields();19、使用el-pagination实现翻页自动回到顶部
// main.js
Vue.prototype.$scrollTo = (x = 0, y = 0, type = 'smooth') => {
window.scrollTo({
top: x,
left: y,
behavior: type // 滚动行为：smooth平滑滚动，instant瞬间滚动，默认值auto，等同于instant
})
}
// 使用方法
this.$scrollTo()18、vue不刷新页面，修改url里的参数
import merge from 'webpack-merge'this.$router.push({
query:merge(this.$route.query,{'参数名':'参数值'})
})17、mysql查询前一条和后一条数据
上一条:select * from 表 where 数据id<@当前显示数据id order by 数据_id asc) limit 1
下一条:select * from 表 where 数据id>@当前显示数据id order by 数据_id desc) limit 1 mysql 里面不支持 select top
16、 Mysql返回数据RowDataPacket
conn.query("SELECT COUNT(ID) as total FROM dp_posts",function(req,res){
console.log(res[0].total)
})res
res[0].total
15、截取富文本中的img
fn(richtext)
// 截取富文本img方法
function fn(str){
var data = [];
str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
data.push(capture);
});
return data
}如果只想截取富文本中的第一张只需要修改正则，把正则末尾的g删除就行了，这就代表只返回第一个匹配。
fn(richtext)
// 截取富文本img方法
function fn(str){
var data = [];
str.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/, function (match, capture) {
data.push(capture);
});
return data
}14、vue渲染富文本编辑器内容
<div v-html="Content"></div>
//Content为渲染内容13、vue中router-link属性
// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>12、js截取字符串
- slice(start, end+1)
- substring(start, end+1)
- substr(start, n)
slice(start, end+1): 两个参数时，参数指截取位置，截取含头不含尾；一个参数时，默认截取到字符串结尾。参数可以为负数，负数就倒着数位置。
substring(start, end+1): 两个参数时，参数指截取位置，截取含头不含尾；一个参数时，默认及渠道字符串结尾。参数不可以为负数。
substr(start, n): 两个参数时，第一个参数指截取起始位置，第二个参数指截取字符个数；一个参数时，默认截取到字符串结尾。第一个参数可为负数，第二个不可为负数。
11、去除字符串中的html标签、注释、回车、空格符（ ）
text= text.replace(/(\n)/g, "");
text= text.replace(/(\t)/g, "");
text= text.replace(/(\r)/g, "");
text= text.replace(/<\/?[^>]*>/g, "");
text= text.replace(/\s*/g, "");
text= text.replace(/ /ig, "");10、常用网页回顶部按钮
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.goTop').fadeIn();
} else {
$('.goTop').fadeOut();
}
});
$('.goTop').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
return false;
});9、判断是否是输入邮件
$("#input").val().match(/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)8、监听输入框
$("#input").bind('input propertychange', function(){
//输入框变化时执行
});7、smarty限制循环个数以及不同Type循环的标签不一样
qa_ul.html
<ul>
<{include file='li.html' coupons=$coupon_list_slice type="qalist"}>
<ul>qa_li.html
<{assign var='qamax' value=1}>
<{foreach from=$qa item="qa_item"}>
<{if !isset($type) && $type != "qalist"}>
<li>
<h3><{$qa_item.question}></h3>
</li>
<{if $qamax == 3}>
<{break}>
<{/if}>
<{else}>
<h3><{$qa_item.question}></h3>
<{/if}>
<{/foreach}>6、 html页面的所有请求都自动将http请求转变为https请求
index.html头中有如下代码
<meta http-equiv=“Content-Security-Policy” content=“upgrade-insecure-requests”>5、文本显示限制
p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /*固定显示2行*/
}4、HTMLInputElement.setSelectionRange()
输入框光标位置，可选定范围
<div class="copy_box">
<input class="copyinput" type="text" value="XXXXX" readonly >
</div>
<script>
$(".copyinput).click(function(e){
e.preventDefault(),
this.focus(),
this.setSelectionRange(0, this.value.length)
})
</script>3、direction: rtl
所有浏览器都支持 direction 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
把文本方向设置为“从右向左”
定义和用法
direction 属性规定文本的方向 / 书写方向。
该属性指定了块的基本书写方向，以及针对 Unicode 双向算法的嵌入和覆盖方向。不支持双向文本的用户代理可以忽略这个属性。
2、滚动条
- ::-webkit-scrollbar 滚动条整体部分
- ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
- ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
- ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
- ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
- ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
- ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
1、设置input、textarea的placeholder颜色
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
/* WebKit browsers */
color: #ced0d6;
}
input:-moz-placeholder, textarea:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ced0d6;
}
input::-moz-placeholder, textarea::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ced0d6;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ced0d6;
}
最新评论