JavaScript实用小技巧（工作归纳）

最新推荐文章于 2024-10-18 17:51:23 发布

Aimior

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量93

点赞数 1

分类专栏：前端常用小技巧文章标签： javascript css html5 html web

本文链接：https://blog.csdn.net/Aimior/article/details/115241293

版权

前端常用小技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了前端开发中实现文本复制粘贴的功能，利用textarea的特性实现，并展示了如何实现模糊搜索、防止屏幕双击放大、图片转文字、文本超长显示省略号等实用技巧。同时，还提供了一些禁用页面元素交互的CSS属性和JavaScript方法。

摘要由CSDN通过智能技术生成

js文本复制粘贴功能（借鸡生蛋）

实现原理

使用一个div或p标签装复制的内容，设置好宽高，然后再创建一个textarea

<p ref="rtspText" class="rtspText">{{adress}}</p>
<textarea ref="copyText" class="copyText">这是幕后黑手</textarea>

借用textarea的复制粘贴函数，然后隐藏textarea

this.$refs.copyText.value = this.$refs.rtspText.innerText
this.$refs.copyText.select()
document.execCommand("copy")

某些需求与实现逻辑冲突，实现简单模糊搜索功能（灵活使用三目运算符）

<el-input type="text" placeholder="请输入用户名" v-model.trim="username" clearable @clear="username=''" />
<el-checkbox-group v-model="selectUser">
<el-checkbox  v-for="item in userData" :key="item.id" :ref="item.id" :label="item" v-show="username == '' ? true : item.name.includes(username)">
{{item.name}} / {{item.number}}
</el-checkbox>
</el-checkbox-group>

注：输入用户名，当输入为空时，显示所有数据，当输入值有且与数据列表里有相同时则找出数据，当输入值有数据列表里没有则显示为空，点击输入框叉叉清除输入值，回归原理为空状态

防止屏幕双击放大（一般用在app上）

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!-- 一般放在public里的html文件里 -->

将图片转为文字正则（世上无难事）

let str = '<p>发的地方的方法法国<img src="http://172.16.20.230/public/VUE_TEMP/202103192008152107560279b2d9c527cae3ac6774ea5e0f30323fbf.jpg' ;

let reg =  /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi ;// 检索图片正则

str = str.replace(reg, '图片') // 转为文字正则

文字超长显示省略号（经常使用的东西，最好背下来）

// 单行
white-space:nowrap; 
overflow:hidden; 
text-overflow:ellipsis;

// 多行
overflow: hidden; 
text-overflow: ellipsis; 
display: -webkit-box; 
-webkit-line-clamp: 3; //行数，此处代表3行
-webkit-box-orient: vertical;

实用属性

界面

// 禁止点击：
pointer-events: none;

input输入框

// 禁止点击：
cursor:not-allowed;
// 禁止触发事件：
pointer-events:none;

鼠标

// 禁止右键：
oncontextmenu="return false"；
// 禁止选择：
onselectstart="return false"；
// 禁止拖放：
ondragstart="return false"；
// 禁止拷贝：
oncopy=document.selection.empty() 。
//禁止复制：
oncopy = "return false"；
// 禁止保存：
<noscript><iframe src="*.htm"></iframe></noscript> //放在head里面。
// 禁止粘贴：
<input type=text onpaste="return false">
// 禁止剪贴：
oncut = "return false"；
// 关闭输入法：
<input style="ime-mode:disabled">

文本样式

// 首行缩进：
text-indent: 2rem;
// 超长换行：
word-wrap: break-word;

滚动条隐藏

.box{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
}
.box::-webkit-scrollbar {
   display: none; /* Chrome Safari */
}