首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

【实战】我是如何在输入框实现@ At功能的

没有完美的方案(ps:只有不听话的产品经理) 的产品经理) textarea、input(例:新浪微博) 流程大概都是(监听keyup, 获取光标位置拆入@的节点...), 但是...相信我如果你手写,...所以推荐下面的库给大家、只要稍作改动就可以使用啦~~ Tribute.js(推荐, ES6) At.js JQ) contenteditable (例:QQ空间, 掘金) HTML5新属性规定元素内容是否可编辑...e.preventDefault 可以阻止我输入的@字符的默认事件 getSelection 可以获取光标的位置、给插入标签一个坐标。...通过@人的监听事件,通过我们自定义的标签插入,通过getSelection获取到的光标位置。...获取光标的坐标在文本中的位置 caret-pos 从 textarea、contentedtiable 或 iframe 正文中获取插入符号/光标的位置/偏移量 import { position, offset

2.4K20

我写CSS的常用套路(附demo的效果实现与源码)

本demo地址:https://codepen.io/alphardex/pen/XWWWBmQ 2、用JS分割文本 还有一种经常用到的玩法:用JS将句子或单词分割成字母,并给每个字母加上不同延时的动画...但这样明显不对啊,这为啥能被看见呢?不应该把它给“挡”起来吗? 于是乎,给按钮加上overflow: hidden,光在按钮外的位置时就被隐藏起来了。 ?...当CSS动画中有属性无法从CSS中获取时,自然就会使用到它了 跟踪鼠标的位置 目前CSS还尚未有获取鼠标位置的API,因此考虑用JS来进行 通过查阅相关的DOM API,发现在监听鼠标事件的API中,可通过...e.clientX和e.clientY来获得鼠标当前的位置 既然能够获取鼠标的位置,那么跟踪鼠标的位置也就不是什么难事了:通过监听mouseenter和mouseleave事件,来获取鼠标出入一个元素时的位置...,并用此坐标来当作鼠标的位移距离,监听mousemove事件,来获取鼠标在元素上移动时的位置,同样地用此坐标来当作鼠标的位移距离,这样一个跟踪鼠标的效果就实现了。

1.6K20

我写CSS的常用套路(附demo的效果实现与源码)

本demo地址:https://codepen.io/alphardex/pen/XWWWBmQ 2、用JS分割文本 还有一种经常用到的玩法:用JS将句子或单词分割成字母,并给每个字母加上不同延时的动画...但这样明显不对啊,这为啥能被看见呢?不应该把它给“挡”起来吗? 于是乎,给按钮加上overflow: hidden,光在按钮外的位置时就被隐藏起来了。 ?...当CSS动画中有属性无法从CSS中获取时,自然就会使用到它了 跟踪鼠标的位置 目前CSS还尚未有获取鼠标位置的API,因此考虑用JS来进行 通过查阅相关的DOM API,发现在监听鼠标事件的API中,可通过...e.clientX和e.clientY来获得鼠标当前的位置 既然能够获取鼠标的位置,那么跟踪鼠标的位置也就不是什么难事了:通过监听mouseenter和mouseleave事件,来获取鼠标出入一个元素时的位置...,并用此坐标来当作鼠标的位移距离,监听mousemove事件,来获取鼠标在元素上移动时的位置,同样地用此坐标来当作鼠标的位移距离,这样一个跟踪鼠标的效果就实现了。

1.4K40

看完这篇,你也可以实现一个360度全景插件

有了光线的渲染,让几何体看起来更具有 3D效果, Three.js中光源有很多种,我们上面使用了环境( AmbientLight)和平行( DirectionalLight)。...2.3 坐标系 在说相机之前,我们还是先来了解一下坐标系的概念: 在三维世界中,坐标定义了一个元素所处于三维空间的位置,坐标系的原点即坐标的基准点。...3.3 事件处理 全景图已经可以浏览了,但是你只能看到你眼前的这一块,并不能拖动它看到其他部分,为了精确的控制拖动的速度和缩放、放大等场景,我们手动为它增加一些事件: 监听标的 mousedown事件...; _onPointerDownPointerY = event.clientY; _onPointerDownLon = _lon; _onPointerDownLat = _lat;}); 监听标的...onPointerDownLon; _lat = (event.clientY - _onPointerDownPointerY) * 0.1 + _onPointerDownLat; }}); 监听标的

8.7K30

iOS 12.0 WebView键盘弹出,关闭后界面没有回收的问题

iOS 12.0 WebView键盘弹出,关闭后界面没有回收的问题 背景 公司有人反馈,iOS 12.0的手机上,H5页面有个地方键盘弹出了,关闭之后,再次点击输入框,没有反应了,其实是界面上移了之后,...没有回到原来的位置。...; } 于是笔者再次尝试修改: 参考iOS12 WKWebView出现input 键盘页面上顶不下移解决方法,在H5界面监听键盘弹出和收起,在收起时,对webview的scrollview做偏移处理...故而再次修改: 笔者发现,有人给出参考方法,由H5端,监听键盘弹起和回收,然后进行处理,但是如果让H5处理,需要每个业务的H5都要单独处理,所以笔者就想,由原生监听键盘收起的通知,然后调用js的方法,代码如下...selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil]; } 然后在通知的方法中实现,调用JS

2.4K20

Threejs入门之六:利用HTML5的requestAnimationFrame方法实现物体的旋转

在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节CPU的开销Threejs中利用requestAnimationFrame实现动画接上节内容,首先在index.js...实现周期性循环执行 mesh.rotateY(0.01) //y轴旋转的弧度 requestAnimationFrame(render)//请求再次执行渲染函数render,渲染下一帧}然后在js...代码优化1、上面定义了一个render函数用于定时刷新渲染器,因此,我们之前的相机控件轨道控制器OrbitControls的监听change事件就可以取消掉了,因为render函数是周期执行的,总会渲染页面...light = new THREE.AmbientLight(0x404040,1)scene.add(light)// 创建点 参数1 的颜色,参数2 的强度const pointLight =...,即画家的眼睛离画布的位置camera.position.set(200,200,200)// 设置相机要看的位置,即眼睛要看的物体的位置// 相机看原点// camera.lookAt(0,0,0)/

1.1K20

iOS 传感器集锦

指纹识别、运动传感器、加速计、环境感、距离传感器、磁力计、陀螺仪 [效果预览.gif] 一、指纹识别 应用:指纹解锁、指纹登录、指纹支付 苹果从iPhone5S开始,具有指纹识别技术,从iOS8.0之后苹果允许第三方...[网络图片.png] [网络图片.jpg] 示例效果:图片旋转的第一张图片用于检测设备是否处于水平位置,第二张图是设备无论在竖直/水平方向上怎么旋转,图片都保持于水平/竖直方向垂直。...利用摄像头获取环境感参数,通过摄像头采集环境参数,然后在代理方法中输出,感越小,环境越暗,然后根据需要做相应的操作。...当我们在打电话或听微信语音的时候靠近听筒,手机的屏幕会自动熄灭,这就靠距离传感器来控制首先打开距离传感器,然后添加通知UIDeviceProximityStateDidChangeNotification监听有物品靠近还是离开...distanceSensor{ // 打开距离传感器 [UIDevice currentDevice].proximityMonitoringEnabled = YES; // 通过通知监听有物品靠近还是离开

1.5K80

探索“流畅感”——谈手势动效体验设计

如今,很多App都使用前端语言来开发内部页面(HTML/CSS/JS)。随着Web混合开发,Flutter等跨端技术栈的出现,越来越多的团队开始拥抱这样的跨平台技术栈。...例如下图,虽然刚开始手指位置有些许下移,但是最终还是可以左滑判定成功。 所以你会发现,如果在iOS桌面上轻微的向左右滑动(10pt内),桌面是不会有任何响应的。...不过,很多人可能会认为,按说这些操作都有原生的监听器,不需要再去定义。但是其实如果不做一些进阶定义,就会出现操作不灵敏的问题。例如下面这个问题。...无论是光标拖动,还是长按选中,我们都希望能清楚的看到光标的位置,所以我们在用户拖动光标和选区的时候,使被拖动的组件放大1.5倍,使用户可以看到拖动效果。 这就够了吗?不够的。...因为取景页面可以点击对焦和测,因此轻微的滑动不应该导致整个取景页面或者底部Tab的滑动,应当是当整个页面检测到一个比较大的滑动动作之后,才自动移动切换。

1.2K20

iOS 传感器集锦

指纹识别、运动传感器、加速计、环境感、距离传感器、磁力计、陀螺仪 效果预览.gif 一、指纹识别 应用:指纹解锁、指纹登录、指纹支付 苹果从iPhone5S开始,具有指纹识别技术,从iOS8.0...网络图片.png 网络图片.jpg 示例效果:图片旋转的第一张图片用于检测设备是否处于水平位置,第二张图是设备无论在竖直/水平方向上怎么旋转,图片都保持于水平/竖直方向垂直。...利用摄像头获取环境感参数,通过摄像头采集环境参数,然后在代理方法中输出,感越小,环境越暗,然后根据需要做相应的操作。...当我们在打电话或听微信语音的时候靠近听筒,手机的屏幕会自动熄灭,这就靠距离传感器来控制 首先打开距离传感器,然后添加通知UIDeviceProximityStateDidChangeNotification监听有物品靠近还是离开...distanceSensor{ // 打开距离传感器 [UIDevice currentDevice].proximityMonitoringEnabled = YES; // 通过通知监听有物品靠近还是离开

1.4K60

微信小程序(逻辑层的全部知识点)保姆级讲解

style="margin: 100rpx 0 0 0;font-size: 40rpx;">6.onResize(res)屏幕旋转事件 具体代码如下:(对于这个api我要说腾讯**,这个api只支持ios...-- 第六个知识点结束 -->  js: // ios系统手机旋转时程序跟着转 onResize(res) { res.size.windowWidth // 新的显示区域宽度...res.size.windowHeight // 新的显示区域高度 }, 效果展示:  3.跳转页面+跳转传参 1.跳转(wx.navigateTo)无法跳转到tabbar(下面的one,two等带图标的页面.../tiaozhuan1/tiaozhuan1', }) }, 效果展示:  2.跳转(wx.redirectTo)无法跳转到tabbar(下面的one,two等带图标的页面)页面,返回时无法返回上一个页面... 跳转后的js: data: { tiaozhuan3Date:null }, /** * 生命周期函数--监听页面加载 */ onLoad(options

1.1K40

设计师会编程、程序员懂艺术:Semi Flat Design

我们看下相关事件: 2006年, 微软媒体播放器内置系统 Zune 就开始使用类似 Metro 的设计风格 2007年, 苹果发布首款iPhone,拟物化设计的iOS系统 2013年, 苹果在iOS7时改用扁平化设计...1.3 Semi Flat 半扁平化 semi Flat风格最突出的表现,就是在扁平化图标的基础上加阴影效果,让图标更具有活力,当然还有其他的表现,比如增强在感、层级、材质上的三维效果。 ?...ps:打个小广告,上图也是我最近在开发的 JS Playground For Designer的一个工具的界面效果。...before里我写的是高效果,通过rotateZ的旋转,还有top、left、width的调整,把高位置摆在了右上方,然后是blur实现的模糊效果,背景颜色是白的。...同样,也可以通过注释掉fliter属性来查看具体位置。 ? 3.3 毛玻璃 ?

2.4K60

Html标签href的困惑记载

而对于Href第三点~指向页面中的锚,如下用法: 需要转到地方添加,文字,注意href值是#开头+英文字母命名 需要在被转到位置添加,<span id="命名" name...---- 此段15-08-19更新: 对于这一段的不理解,后来在ios客户端童鞋的帮助下消解了。对于Iosjs的交互是略有点不同的: ios中objective-c与js的交互这篇文章会有讲到。...里面有一个监听 http 跳转的方法;一旦有类似http:// or objc://他们都可以监听到(像这种 http:// 并不是他们要的 ,而要的是这种 objc:// 这种,所以在跟ios通信时候...如此就能解释了之前出现问题了:ios可以监听到点击这种链接,从而使得页面被刷新。 ---- 那么很疑惑,为何Android平台没有该问题?...总结:#包含了一个位置信息默认的锚是#top 也就是网页的上端; 而javascript:void(0)仅仅表示一个死链接,没有任何信息。

3.3K50

【数据可视化专题】数据可视化:前端数据之美如何展示?

下面列出了一些较为常见的指标项: PV/UV:最基础的 PV(页面访问数量)、UV(独立访问用户数量) 页面来源:页面的 refer,可以定位页面的入口 操作系统:了解用户的 OS 状况,帮助分析用户群体的特征,特别是移动端,iOS...3、点击 在用户的所有操作中,点击应该是最为主要的一个行为,包含了:pc 端鼠标的 click,移动端手指的 touch。...点击热力图:根据用户点击的位置,我们可以画出整个页面的点击热力图,可以很直观的了解到页面的热点区域 4、异常 这里的异常是指 JS 的异常,用户的浏览器上报 JS 的 bug,这会极大地降低用户体验...t=pageview&ref=yourRefer 再例如:JS 异常的采集,需要进行事件监听 // 加载 alogvoid function(e,t,n,a,o,i,m){e.alogObjectName...用户的地理位置分布: ? 有些时候需要看多天的波动情况,例如浏览器的多天占比波动情况 ? 还有些时候你可能需要使用一些表格来展示: ? ?

3.4K101

WKWebView

5,WKWebView可以和JS直接互调函数,交互更方便;而UIWebView则需要依靠WebViewJavaScriptBridge第三方库来协助处理与JS的交互,实现起来较繁琐。...以上介绍了WKWebView的优点,但是其也有以下缺点: 1,WKWebView需要iOS9及更高的版本,虽然WKWebView是在iOS8之后引入的,但是iOS8的版本存在重大限制,比如无法访问本地存储的文件...布尔值,用于确定是否按下连接可以显示链接目标的预览。 - goBack。导航到后退列表中的后腿项中。 - goForward。导航到后退列表中的前进项中。...WKWebView的estimatedProgress属性值的变化来实现加载进度条,那么WKWebView中还有那些属性值的变化也是可以被KVO监听到的呢?...我们可以通过JSCore或者JSBridge来在native中执行JS代码,并且在JS中去回调Native的相关函数。 现在很火热的跨平台以及热修复技术,都是基于JS与Native通信来实现的。

5.9K20

你想把Processing跑在iPhone上?

因为 iOS 开发一个 App 应用是可以内置 python 解释器的,但是很麻烦,因为如果想完美和 iOS 系统的特性如陀螺仪、摄像头、视频等结合起来,还是会异常繁琐。 p5js 呢?...使用 p5jsiOS 系统上玩转 Processing,不得不面临着一些问题: 1、p5js 需要运行在浏览器上,效率堪忧 2、p5js 如果利用 iOS 的系统特性,如重力加速计、摄像头、AR等等...,需要和原生开发语言如 Objective-C 或者 Swift 进行桥接通信,成本有些大 3、p5js 的一些特性仅适用于桌面浏览器,并不适用于移动端 iOS 上的浏览器。...也正是开源,github 社区有大牛已经开始实现 Processing 在 iOS 系统上的移植操作。 所谓移植,就是将 Processing 的全部或者关键部分用 iOS 开发的语言重新实现一遍。...试想一下,如果将 Processing 和 iOS 设备的线性马达、运动传感器/加速计/陀螺仪,环境感处理器、距离传感器、磁力计、原深感摄像头、地理位置等等结合起来,能做出多少非常有趣的创意。

1.8K30
领券