技术宅：让网页可编辑 如何选择链接中的文本 - A5站长网
当前位置：
技术宅：让网页可编辑 如何选择链接中的文本
16:34&&来源：&
　　[核心提示] 我不知道你是不是有这样的疑惑，在 Word 里，链接是通过按住 Ctrl 键打开的，而在浏览器中，只要点一下链接就会被打开。那么，如果想选择一个链接内的文本该如何操作?
　　你考虑过吗?
　　我不知道你是不是有这样的疑惑，在 Word 里，链接是通过按住 Ctrl 键打开的，而在浏览器中，只要点一下链接就会被打开。那么，如果想选择一个链接内的文本该如何操作?
　　比如上图中被框起来的&新闻&两个字，该怎样选中它?一般的答案，应该是先选择&百度新闻&或&新闻搜索&，然后复制粘贴到需要的地方，再来根据情况掐头去尾就行了。我相信这也是大部分人的做法。然而&&
　　将就跟讲究，差得太多了。
　　参考答案
　　Vimperator 和 Vimium
　　这是两个功能相同的浏览器扩展，分别在 Firefox 和 Chrome 中使用。它们让浏览器操作变得像在 Vim 一样，具体功能可以搜索相关文章，我这里也没有必要多费口舌。具体操作方法是在使用这一扩展的时候，按键盘上的 C 进入光标模式，后面的操作就和在 VIM 里一样了，用方向键控制光标到希望的地方，然后按 V 开始选择，再然后按 V(对应 VIM)或 Ctrl 或 Command+C 来复制。
　　但是，这只是一个可行的方法，不是最好的方法，对于：
　　因不喜爱或不愿付出过量学习成本不愿使用它们的人;
　　没有类似扩展的浏览器。
　　有没有不用扩展就可以达到目标的方法呢?我们继续探索。
　　光标浏览
　　尽管 IE 一直口碑不好，但是其创新之处并不少。尼古拉斯&泽卡斯先生有一篇著名的文章《The innovations of Internet Explorer》(译文)，有兴趣可以看看。然而此君所述更多是在技术层面的创新，而没有提产品层面的创新。我无意在这里花篇幅补全&产品的创新&这一部分，只提这里用到的光标浏览。光标浏览(caret browsing)是 IE 8 中首创的功能，，可以通过 F7 键调出。官方的介绍如下：
　　这一功能后来被 Firefox 抄袭，甚至连快捷键也同样是 F7。
　　总之，按下之后，你点击网页中有文字的地方，会看到那里出现一个竖线光标，就像 Word 一样。除了计算机相关从业者和爱好者外，很少有人知道，在绝大多数有图形界面的操作系统中，可以通过按下 Shift 键移动光标或点击鼠标来选择文字。试着去问问你开小超市的姨父或正在初三冲刺中考的表妹，我相信他们肯定会一脸疑惑。而这一小技巧则是本方法的关键之一。那么接下来怎么做也就呼之欲出了：把光标定位到链接附近，然后按住 Shift 移动光标直到选择完，然后选中的文字就任你处置了。遗憾的是，现在的世界第二大浏览器 Chrome 尚不支持这一特性，总不能为了选个文字还要切换到 IE 吧!那么还有什么别的招呢?
　　让网页可编辑
　　在不久的几年前，Chrome 和 360 浏览器这两个如今的主流还尚未出世，Firefox 仅在极少小众中有着良好口碑，但统治天下的是一大波 IE 套壳浏览器。那时候，腾讯出的浏览器还不叫 QQ 浏览器，而是叫做&腾讯 TT&。
　　我至今仍觉得腾讯 TT 很不错，除了轻量的安装大小、清新简洁的外观、便捷够用的内置功能外，一个让我印象深刻的特点是它可以&剪切&网页中选中的文字，这一点让年轻的我震惊不已。在产品设计中的一个重要参考原则是给用户的任何操作以反馈，比如按钮按下的反馈、异步载入时等待返回请求的 Loading 提示。我很喜欢这种反馈，但是复制的时候却无法得到反馈。所以在我既可以剪切又可以复制的时候，我常常会选择剪切，原因是我能从中得到反馈：剪切的内容变没了。我多希望复制文字的时候也能得到一个反馈告诉我&文字已复制&，但是只有在很少数的情况才会遇到，真是&可遇而不可求&。
　　这和我们的问题有什么关系?言归正传，从&光标浏览&一节可以看出只要在浏览器中放置一个可移动的光标，那么选择就是很容易的事情了。在 Chrome 中，怎样做到，我想对熟悉 web 开发的读者看到本节标题心里就有谱了。是的，正是藉由 HTML5 种的这一个 contentEditable 属性，这一属性可以让腾讯 TT 中那一让我印象深刻的特性再现。顾名思义，这一属性用于控制网页的可编辑性。可以按尝试打开浏览器的控制台，输入命令:
document.body.contentEditable =
　　再用鼠标点一下有字的地方，你会发现光标出现了!后面剩下的步骤，参考&光标浏览&的内容。只是，每次都需要这样的话，怎么也不够方便。那么自然而然会想到将其转制为一个 userscript 脚本，通过 Grease Monkey 或 Tampermonkey 等让它自动载入。
// ==UserScript==// @name editable// @namespace
editable// @description editable// @version 1// @author
geekpark// @include *// @grant none// @run-at document-end// ==/UserScript==;(function() { var bind = (document.addEventListener ? document.addEventListener : (document.attachEvent ? document.attachEvent : false)); if (bind) {
var body = document.
bind.call(document, 'dblclick', function() {
var editable = body.contentE
body.contentEditable = !(editable === 'true' || editable === true);
bind.call(document, 'keydown', function(e) {
if (e.which === 27 || e.keyCode === 27) {
body.contentEditable =
}); }})();
　　可以将上面这个文件保存，用各种浏览器对应的方法安装为 userscript。其作用是双击就可以切换是否出现光标。
　　至此，我所知道的途径就介绍完了。
责任编辑：扬扬
延伸阅读：关键词：
站长杂谈 草根站长信息中心
兄弟网站：||||||
徐州八方网络科技有限公司 增值电信业务经营许可证： | 编辑热线：5 |
A5站长网 版权所有.匿名用户上传于：
&2015 蟹腿&&&&粤ICP备号-2
《华为手机G730 用户指南(G730-C00,01,中文)》书签浏览
《华为手机G730 用户指南(G730-C00,01,中文)》缩略图浏览
正在努力载入，请稍后～～Android&编辑框（EditText）属性学习
EditText继承关系：View--&TextView--&EditText
　EditText的属性很多，这里介绍几个：android:hint="请输入数字！"//设置显示在空间上的提示信息
android:numeric="integer"//设置只能输入整数，如果是小数则是：decimal
android:singleLine="true"//设置单行输入，一旦设置为true，则文字不会自动换行。
android:password="true"//设置只能输入密码
android:textColor =
"#ff8c00"//字体颜色
android:textStyle="bold"//字体，bold,
italic, bolditalic
android:textSize="20dip"//大小
android:capitalize =
"characters"//以大写字母写
android:textAlign="center"//EditText没有这个属性，但TextView有，居中
android:textColorHighlight="#cccccc"//被选中文字的底色，默认为蓝色
android:textColorHint="#ffff00"//设置提示信息文字的颜色，默认为灰色android:textScaleX="1.5"//控制字与字之间的间距
android:typeface="monospace"//字型，normal, sans,
serif, monospace （标准、无衬线字体、衬线字体、等宽字体）
android:background="@null"//背景，这里没有，指透明
android:layout_weight="1"//权重，控制控件之间的地位,在控制控件显示的大小时蛮有用的。
android:textAppearance="?android:attr/textAppearanceLargeInverse"//文字外观
android:layout_gravity="center_vertical"//设置控件显示的位置：默认top，这里居中显示，还有bottom
android:gray="top"
//多行中指针在第一行第一位置
et.setSelection(et.length());//调整光标到最后一行
android:autoText //自动拼写帮助
android:capitalize //首字母大写
android:digits //设置只接受某些数字
Android：singleLine//是否单行或者多行，回车是离开文本框还是文本框增加新行
android：numeric //只接受数字
android：phoneNumber //输入电话号码
android：editable //是否可编辑
android:autoLink=”all”
//设置文本超链接样式当点击网址时，跳向该网址
android:textAppearance="?android:attr/textAppearanceLargeInverse"//文字外观，这里引用的是系统自带的一个外观，？表示系统是否有这种外观，否则使用默认的外观。不知道这样理解对不对？
　属性名称描述
　　android:autoLink设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)
　　android:autoText如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输入的时候起作用。
　　android:bufferType指定getText()方式取得的文本类别。选项editable
类似于StringBuilder可追加字符，
　　也就是说getText后可调用append方法设置文本内容。spannable
则可在给定的字符区域使用样式，参见这里1、这里2。
　　android:capitalize设置英文字母大写类型。此处无效果，需要弹出输入法才能看得到，参见EditView此属性说明。
　　android:cursorVisible设定光标为显示/隐藏，默认显示。
　　android:digits设置允许输入哪些字符。如“.+-*/%
　　android:drawableBottom在text的下方输出一个drawable，如图片。如果指定一个颜色的话会把text的背景设为该颜色，并且同时和background使用时覆盖后者。
　　android:drawableLeft在text的左边输出一个drawable，如图片。
　　android:drawablePadding设置text与drawable(图片)的间隔，与drawableLeft、drawableRight、drawableTop、drawableBottom一起使用，可设置为负数，单独使用没有效果。
android:drawableRight在text的右边输出一个drawable，如图片。
android:drawableTop在text的正上方输出一个drawable，如图片。
android:editable设置是否可编辑。这里无效果，参见EditView。
android:editorExtras设置文本的额外的输入数据。在EditView再讨论。
android:ellipsize设置当文字过长时,该控件该如何显示。有如下值设置：”start”—?省略号显示在开头;”end”——省略号显示在结尾;”middle”—-省略号显示在中间;”marquee”
——以跑马灯的方式显示(动画横向移动)
android:freezesText设置保存文本的内容以及光标的位置。参见：这里。
android:gravity设置文本位置，如设置成“center”，文本将居中显示。
android:hintText为空时显示的文字提示信息，可通过textColorHint设置提示信息的颜色。此属性在EditView中使用，但是这里也可以用。
android:imeOptions附加功能，设置右下角IME动作与编辑框相关的动作，如actionDone右下角将显示一个“完成”，而不设置默认是一个回车符号。这个在EditView中再详细说明，此处无用。
android:imeActionId设置IME动作ID。在EditView再做说明，可以先看这篇帖子：这里。
android:imeActionLabel设置IME动作标签。在EditView再做说明。
android:includeFontPadding设置文本是否包含顶部和底部额外空白，默认为true。
android:inputMethod为文本指定输入法，需要完全限定名(完整的包名)。例如：com.google.android.inputmethod.pinyin，但是这里报错找不到。
android:inputType设置文本的类型，用于帮助输入法显示合适的键盘类型。在EditView中再详细说明，这里无效果。
android:linksClickable设置链接是否点击连接，即使设置了autoLink。
android:marqueeRepeatLimit在ellipsize指定marquee的情况下，设置重复滚动的次数，当设置为marquee_forever时表示无限次。
android:ems设置TextView的宽度为N个字符的宽度。这里测试为一个汉字字符宽度，如图：
android:maxEms设置TextView的宽度为最长为N个字符的宽度。与ems同时使用时覆盖ems选项。
android:minEms设置TextView的宽度为最短为N个字符的宽度。与ems同时使用时覆盖ems选项。
android:maxLength限制显示的文本长度，超出部分不显示。
android:lines设置文本的行数，设置两行就显示两行，即使第二行没有数据。
android:maxLines设置文本的最大显示行数，与width或者layout_width结合使用，超出部分自动换行，超出行数将不显示。
android:minLines设置文本的最小行数，与lines类似。
android:lineSpacingExtra设置行间距。
android:lineSpacingMultiplier设置行间距的倍数。如”1.2”
android:numeric如果被设置，该TextView有一个数字输入法。此处无用，设置后唯一效果是TextView有点击效果，此属性在EdtiView将详细说明。
android:password以小点”.”显示文本
android:phoneNumber设置为电话号码的输入方式。
android:privateImeOptions设置输入法选项，此处无用，在EditText将进一步讨论。
android:scrollHorizontally设置文本超出TextView的宽度的情况下，是否出现横拉条。
android:selectAllOnFocus如果文本是可选择的，让他获取焦点而不是将光标移动为文本的开始位置或者末尾位置。TextView中设置后无效果。
android:shadowColor指定文本阴影的颜色，需要与shadowRadius一起使用。效果：
android:shadowDx设置阴影横向坐标开始位置。
android:shadowDy设置阴影纵向坐标开始位置。
android:shadowRadius设置阴影的半径。设置为0.1就变成字体的颜色了，一般设置为3.0的效果比较好。
android:singleLine设置单行显示。如果和layout_width一起使用，当文本不能全部显示时，后面用“…”来表示。如android:text="test_
singleLine " android:singleLine="true"
android:layout_width="20dp"将只显示“t…”。如果不设置singleLine或者设置为false，文本将自动换行
android:shadowDx设置阴影横向坐标开始位置。
　　android:shadowDy设置阴影纵向坐标开始位置。
　　android:shadowRadius设置阴影的半径。设置为0.1就变成字体的颜色了，一般设置为3.0的效果比较好。
　　android:singleLine设置单行显示。如果和layout_width一起使用，当文本不能全部显示时，后面用“…”来表示。如android:text="test_
singleLine " android:singleLine="true"
android:layout_width="20dp"将只显示“t…”。如果不设置singleLine或者设置为false，文本将自动换行
　　android:text设置显示文本.
　android:textSize设置文字大小，推荐度量单位”sp”，如”15sp”
　　android:textStyle设置字形[bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜)
2] 可以设置一个或多个，用“|”隔开
　　android:typeface设置文本字体，必须是以下常量值之一：normal 0, sans 1, serif 2,
monospace(等宽字体) 3]
　　android:height设置文本区域的高度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)
　　android:maxHeight设置文本区域的最大高度
　　android:minHeight设置文本区域的最小高度
　　android:width设置文本区域的宽度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)，与layout_width的区别看这里。
　　android:maxWidth设置文本区域的最大宽度
　　android:minWidth设置文本区域的最小宽度
　　android:textAppearance设置文字外观。如“?android:attr/textAppearanceLargeInverse”这里引用的是系统自带的一个外观，?表示系统是否有这种外观，否则使用默认的外观。可设置的值如下：textAppearanceButton/textAppearanceInverse/textAppearanceLarge/textAppearanceLargeInverse/textAppearanceMedium/textAppearanceMediumInverse/textAppearanceSmall/textAppearanceSmallInverse
　　android:textAppearance设置文字外观。如“?android:attr/textAppearanceLargeInverse
”这里引用的是系统自带的一个外观，?表示系统是否有这种外观，否则使用默认的外观。可设置的值如下：&
textAppearanceButton/textAppearanceInverse/textAppearanceLarge/textAppearanceLargeInverse
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。