文章关键字 ‘文字选中’

不同CSS布局实现与文字鼠标选择的可用性

2012年05月21日,星期一

我们平时因为A原因或B原因,需要复制web页面上的文字内容。常见的操作就是按住鼠标,选中要复制的文字区域,抬起鼠标按键,目标区域的文字就选中了。
不知你知不知道,有些看山去OK的CSS布局实际影响了页面上文字复制的可用性。
这么说吧,假设你在微博上看见一个名为“屌丝逆袭”的标题,但是,由于孤陋寡闻,不知道这个标题啥意思,于是想百度之,最快的方式就是选择→复制→搜索。结果,像中了邪,这几个文字TMD就是选不准,老把旁边的“萝莉御姐”一起选中了;然后,这个标题又是链接,不能双击选……

本文重在抛砖引玉,希望对各个同行有所小小意识与启发。

阅读全文…

JS Range HTML文档/文字内容选中、库及应用介绍

2011年04月14日,星期四


本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情。其中,最常见的Range是用户用鼠标选择的内容(user selection)。

本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。随后展示了Range相关的JavaScript库,以及JS 文本域光标处插入文字的实现——即新浪微博的插入话题功能的完整版实例展示。

本文提供必要的表格数据,源代码展示,效果截图以及demo页面,内容较多,篇幅较长。希望本文的内容能够对您的学习有所帮助。

阅读全文…

js页面文字选中后分享到新浪微博实现

2011年02月12日,星期六

正是微博如火如荼的时节,其中各个微博的分享功能是网站推广产品的好东东啊,此时如何方便快捷的使用微博的分享功能就显得比较重要了。
一般翻译软件都有划词翻译功能,启用后,随便选中那个软件的一段文字,就会出现类似这样子的浮动提示框。
在web页面上,我们也是可以实现类似的效果的:划词→显示提示→分享。这样子,我们就可以轻松地将页面上的内容分享到新浪微博这些微博网站上了。

本文提供demo页面,提供源代码展示,必要的截图。总之,希望能对您的学习有所帮助。

阅读全文…

使用CSS3 ::selection伪元素改变文本选中颜色

2010年10月8日,星期五

本文主要介绍如何使用CSS3的一些属性改变浏览器页面文字默认选中的样式(主要是文字颜色和背景色),犹如魔术一样,知道了原理其实也就很简单了。所以本文其实没有什么内容,小技巧展示而已。一如既往的,有源代码展示,有截图,还有必要的demo页面,希望能对您的学习提供一些帮助。

阅读全文…

新浪微博插入话题后部分文字选中的js实现

2010年04月14日,星期三


在新浪微博的微博信息发布框下面,有个“话题”按钮,点击这个“话题”文字按钮后,在输入框文本域里面就会添加一段文字“#请在这里输入自定义话题#”,其中“请在这里输入自定义话题”处于被选中的状态,这样用户无需再选中文字,直接敲键盘就可以替换这部分内容,这是非常好的一个提高用户体验的细节。
本文就像详尽的讲解这种效果的实现,提供详尽的代码展示,必要的截图,以及demo示例页面,希望能对您的学习有所帮助。

阅读全文…