- 博客(25)
- 收藏
- 关注
RSS订阅原创 实现禁止输入但允许粘贴的输入框：纯前端解决方案
本文介绍了如何实现仅允许粘贴、禁止直接输入的输入框功能。通过HTML、CSS和JavaScript，开发者可以创建适用于验证码、敏感信息等场景的安全输入控件。关键技术包括：阻止键盘输入的keydown事件处理、获取剪贴板数据的paste事件监听，以及实时验证的input事件保护。文章提供了完整的代码示例和样式设计，并强调了三类典型应用场景（验证码、敏感数据、格式化内容）。这种纯前端解决方案具有良好的兼容性和用户体验，无需依赖外部库即可实现安全输入控制。
2025-09-17 16:00:20
362
原创 精准移植代码：使用git cherry-pick 将特定提交应用到生产分支
是一个强大而精准的工具，特别适合处理需要选择性移植代码的场景。掌握了它，你就能优雅地处理紧急修复和选择性部署的需求，避免将不成熟的代码意外带入生产环境。记住，能力越大责任越大——虽然 cherry-pick 很强大，但仍需谨慎使用，并且始终牢记代码质量和团队协作的重要性。
2025-09-16 14:47:03
1088
原创 限制输入框只能输入数字与中文冲突问题
摘要：文章分析了在el-input中使用v-model和oninput事件限制数字输入时，遇到输入中文导致内容清空的问题。原因在于输入法组合过程会触发多个事件，直接过滤会破坏输入法工作流程。解决方案是使用isComposing标志位控制过滤时机，监听compositionstart/end事件，在组合结束后执行过滤。提供了两种实现方式：组件方法和自定义指令(v-number-only)，后者可全局复用。这种方法能有效兼容中文输入法，同时保持数字过滤功能。
2025-09-10 11:35:25
372
原创 完善Element UI日期选择器的年范围选择功能
本文介绍了为ElementUI(Vue2)的el-date-picker组件扩展年份范围选择功能的实现方案。针对原生组件缺少年范围选择支持的痛点，通过复制源码并自定义开发的方式，新增了year-range.vue面板组件，完善了year-table.vue的逻辑判断，修改了picker的type路由配置。关键实现包括：十年区间计算逻辑、范围选择状态管理、样式适配等。最终通过type="yearrange"即可使用年范围选择功能，解决了跨年度数据筛选的需求，为类似组件扩展提供了参考范例。
2025-07-29 16:25:12
716
原创 vue日期滚动选择器实现
最近得到一个需求，要实现一个如下图所示的日期滚动选择器，在网上找了许久都没找到合适的，无奈只能自己写一个。先实现单个滚动选择效果，
2024-10-25 11:20:16
948
2
原创 用JavaScript实现烟花效果
要实现烟花效果之前，我们先得将body的背景设为黑色，这样烟花的效果才能更加明显，下面附上两种烟花效果的代码： 1、自由散落效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name...
2022-04-23 19:27:54
4667
1
原创 Git概述以及常用命令
git 概述：git是一个分布式版本控制工具(运用最广的一个版本控制工具),svn(也是一个版本控制工具)。git是用来管理项目代码版本的，可以使多人开发同一个项目，且保证项目的完整性及唯一性。（git都是在本地仓库（本地电脑上的）进行代码的修改，提交给远程仓库（网络地址））git命令大全： 1、检索环境git version #查看版本 2、初始化本地版本库git init 3、查看本地仓库状态git status 4、添加文件到暂存区git add 文件名/文件路径
2022-04-22 20:37:29
179
原创 JSONP
JSONP同源策略（同源政策）概述浏览器为了安全性考虑 拒绝访问不同源的内容 这个称为同源策略跨域（CORS）跨域问题的产生 是由于同源策略的影响1.请求协议不一致 （http 和 https）2.ip地址不一致 （127.0.0.1 和 192.168.0.1）3.端口不一致 （80 和 3306）4.走的file协议 文件不一样也会跨域跨域解决1.后端解决 （设置请求头）Access-Control-Allow-Origin: *2.前端解决 （通过设置请求 jsonp）
2022-04-19 20:26:18
116
原创 面向 对象
面向对象面向对象的概述面向对象不是一个新的内容，而是一个编程思想（oop）面向过程1.去相亲网站2.填写信息3.确定目标4.建立联系5.约会…面向对象1.找对象（找个媒婆）2.调用对象的方法（说媒）面向对象的主要思维是找能做这个事情的对象（万物皆对象 所有的东西都能被当成对象）了解对象对象类型属于引用数据类型 关于对象的创建对象的创建直接赋值let obj = {} //对象类型使用new关键词let obj = new Object() //首字母是大写的数组
2022-04-13 20:48:36
111
原创 E S 6
es6 ecmascript6.0 (2015发布的)let 块作用域修饰（建议使用）let a = 10a = 30let a = 20 //报错 同一作用域不允许同名const 常量修饰 也有块状作用域 （不能更改）const str = 'hello'str = 'world'//报错箭头函数 => （箭头函数没有this 箭头函数没有arguments）let fn =()=>{ //如果只有一个参数（）可以省略 如果指向的代码只有一句{}也可以省略 conso
2022-04-12 18:56:38
124
原创 ES 5
1. JavaScript 的版本 JavaScript这种语言的基本语法结构是由ECMAScript来标准化的, 所以我们说的JavaScript版本一般指的是ECMAScript版本.2009年12月，ECMAScript 5.0版正式发布2011年6月，ECMAscript 5.1版发布2015年6月，ECMAScript 6正式发布，并且更名为“ECMAScript 2015”。 2016年6月，ECMAScript6.1发布， 与ECMAScript6差异较小E...
2022-04-05 22:27:38
119
原创 JSON
1,JSON介绍JSON 是一种结构化的数据表示方式(数据格式). 通过JavaScript中的一些模式来表示结构化数据, JSON 并不是 JavaScript 独有的数据格式，其他很多语言都可以对 JSON 进行解析和序列化, 除了JSON外, 还有XML也是一种数据表示方式; 目前很少使用XML的数据格式.2, JSON的写法对象的表现形式: 包括数组和对象字符串的表现形式: 包括数组和对象的字符串 对象的写法: 使用双引号 {“name”:“Zhang”, ...
2022-03-30 19:37:39
91
原创 Cookie会话跟踪技术
cookie是存放在浏览器上的一个只有4kb的容器，他可以解决http请求的无状态问题，而且每次会话里面都会保存对应的sessionId 且每次请求都会带上里面存放的String类型的值。cookie里面的数据存储以键值对的形式存储 key=value完整格式name=value;[expires=date];[path=路径];[domain=域名];[secure]其中中括号[]表示该值是可选。name=value: 为你要保存的键值对(必选)expires=date: 表示co
2022-03-30 19:27:39
833
原创 js相关事件
js事件是指我们使用鼠标或键盘做了某些事件来触发对应的处理函数。所有的事件都是以on开头，分为三类：鼠标事件，键盘事件，HTML事件。由三部分组成：触发事件的元素，对应的事件，事件的处理函数。分为以下四种模式：内联模式1<button onclick="alert('hello')">点击</button>内联模式2<button onclick="自己定义的函数名( )">点击</button>脚本模式1doucument.ge
2022-03-30 14:00:25
622
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人