文本框内容复制的那些事儿

人家经常会遇到要复制网站提供的文本框里代码,或者复制自己的邀请链接发给别人……等等情况~
类似情况,名为:
文本输出——用于显示长字符串的只读多行文本框。  
原文见此 
现在网络上一般会提供以下操作方式:

1.鼠标全选文本,再复制
例子:后台 
友情链接分类 的调用代码界面:

问题:需要通过鼠标完整的复制调用代码,且文本框区域没做限制,会无选择到框外的内容——操作步骤多,容易误操作。

2.鼠标焦点在文本框后,自动全选(不支持修改内容),再复制
例子:新浪微博的
邀请 界面

问题:
一键复制功能不支持chrome等浏览器
优点:鼠标焦点定位在文本框后,自动全选内容,内容不可编辑修改。

3.鼠标焦点在文本框后,自动全选(不支持修改内容),再复制
例子:淘宝联盟的推广代码获取
界面

问题:文本框为flash形式,用户的浏览器如果不支持flash,则无法复制代码
优点:支持多浏览器

4.鼠标焦点在文本框后,自动全选(但支持修改内容),再复制
例子:腾讯微博的
邀请 界面

问题:文本框内容支持编辑修改,可能导致复制的内容不准确
优点:多浏览器支持一键复制
注:腾讯微博与淘宝联盟的区别在于把复制链接的按钮以flash代替,突破了浏览器的限制,同时又能兼容无flash用户的使用需求。

类似还有以下处理方式——
优酷:不支持多浏览器,但点击按钮后,会自动全选文本框内容;
YouTube
:未提供一键复制功能,需手动复制内容,但用户在操作时,会自动全选文本框内容;
还有一种交互方式,是鼠标滑过即自动全选文本框内容(个人觉得门槛太低,使用起来感觉不太安稳。。)

  


那,最好的方案是怎样的??
方案1
提供单独复制按钮的情况下,
以腾讯微博的分享为蓝本+限制文本框内容不可修改即可。

方案2(即中准备使用的方案):
不提供单独复制按钮的情况下,
则直接以新浪微博+去掉按钮的形式进行处理——文本框内容不可修改,鼠标焦点在文本框后自动全选内容。

over~

 

交流一:
欢迎各位前端工程师、UE大师们提出更好的方案。

AA:上述几个案例还是看的出使用场景的哦,像联盟推广一看就是要全选复制插入到代码里的,故而直接是copyall
关于选择及复制功能,在手机端应用上的易用性探讨会更加多,有机会找几个无线端案例分析下~
 (2012-06-05 13:30) 


整理说的
都是需要全选复制的,例如Google AdSense ,在那里面获取广告代码,也只是提供了获取焦点后自动全选的操作。
它不考虑使用flash调用形式,应该也是考虑到通用性问题吧。

当然,我们也可以考虑类似于编辑器中上传图片的操作一样,默认提供flash上传方式,如果用户浏览器不支持flash插件,则使用普通上传方式。

PS  刚才特意卸载了flash插件,再去体验了下淘宝联盟的广告代码调用机制,实际处理机制

上文中 1.鼠标全选文本,再复制  的效果一样啦。。。

 

交流二:

CC:
挺巧,我刚研究完贴子阅读页代码高亮后复制的问题。我现在用的是最有名的代码高亮组件SyntaxHighlighter,在SyntaxHighlighter之前的版本之前一直使用flashcopy代码,就是这样子

但是它的最新版本把这个功能去掉了,理由在这:
http://alexgorbatchev.com/SyntaxHighlighter/whatsnew.html#copytoclipboard

大致意思应该说是因为这种复制方法不直观,所以改成了双击全部选中,这样更简单更直观,更符合习惯。
其实想想也是,在操作系统里要复制文字时也是双击选中然后复制的。用户想要复制时,双击全选以后右键或者ctrl+复制就可以了,何必搞那么麻烦呢。


这是不是因为使用场景和用户不太一致?
双击全选的,一般是在代码编辑器中有这样子的操作?
日常的使用场景中,很少有这样的操作吧,比如记事本等。

 

发表评论