日常笔记

丁美清随心笔记

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标签、注释、回车、空格符（&nbsp）

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(/&nbsp;/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;
        }

发表评论

电子邮件地址不会被公开。 必填项已用*标注