专栏首页HTML5学堂JavaScript | 选中并获取多行文本框内容的效果

JavaScript | 选中并获取多行文本框内容的效果

HTML5学堂(码匠):文本操作一直是开发中不可避免的存在,用户选中的文本内容,是否可以进行获取并处理到需要的位置当中?如果可以,这样的操作到底需要使用到哪些方法呢?

本文主要内容

1. 目标效果展示

2. 涉及的基本属性知识

3. 核心功能-选取的相关知识

1. 目标效果展示

如上,主要实现的是用户自定义选择多行文本框中的任何内容,然后把获取的内容放到按钮下的文本中作为内容的存放,最后通过点击按钮实现内容的设置,从而把用户需要的信息从大量的内容文本中获取出来。实现这种文本操作的功能,就必然需要考虑各方面的属性以及浏览器等兼容问题,接下来就一起来看看吧~~~

2. 涉及的基本属性知识

2.1 innerHTML属性

innerHTML是一个在JS中拥有双向功能的属性,它可以获取对象的内容,同时又可以向对象插入内容。所以在使用JS处理内容时,通常是需要借助标签的innerHTML属性,对标签元素的内容进行修改。即把内容赋值给这个属性即可。如下:

for (var i = 0; i < arr.length; i++) {
    // 填充用户选择到的文本
    con.innerHTML += '<p>' + arr[i] + '</p>';
};

2.2 字符串方法

字符串方法是JS底层操作中经常使用到的一系列方法,本效果中主要是借助了split()方法,这个方法主要是用来实现字符串的切割,得到的是一个字符串数组,其切割的依据在于方法中的参数,参数标记是什么,那就按照这个标记进行切割。如下是依据转义字符“\n”的做字符串切割的书写:

var arr = nowText.innerHTML.split('\n');

3. 核心功能-选取的相关知识

本效果是对文本内容的处理操作,其中针对不同的浏览器就存在着不同的兼容处理,具体表现在谷歌、火狐与IE浏览器之间实现相同功能采用不同的方法。其中用户在谷歌、火狐浏览器中选择文本时需要借助getSelection()方法,而IE浏览器则借助的是selection()方法。其具体的用法及区别一起来看吧~

3.1 getSelection()方法

getSelection()方法返回的是一个selection对象,表示的是用户选择到的文本内容,支持谷歌、火狐、苹果等浏览器,具体写法如下:

if(window.getSelection) {
    text = window.getSelection();
} else {
    if(document.getSelection) {
        text = document.getSelection();
    } else {
        text = "";
    }
}

3.2 selection对象

selection对象代表的是选中区,即对于文档中用户可执行某些操作的元素与内容。用户和JS都可以创建选中区,用户创建选中区的办法是选中文档的某一部分;JS创建选中区是在文本域等位置调用selection对象。而在IE浏览器中要操作选中区需要先使用createRange()方法创建一个文本域对象,具体使用如下:

if(document.selection) {
    // document.selection.createRange().htmlText获得包含html的内容
    text = document.selection.createRange().htmlText;
} else {
    text = "";
}

关于完整代码

如需查看完整代码,请前往:http://codepen.io/majiang/pen/NpKyjV/

(有可能因为网络原因,导致加载速度较慢)。

总结

文本操作是前端开发中一块比较复杂的处理操作,究其原因在于各个浏览器都存在着兼容问题,所以在各种使用场景中都需要考虑方法的兼容操作。上文中主要就是为大家讲解Selection对象对于页面文本内容的选中操作。

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂(码匠)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-02-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 几个前端工程师应当掌握的“词语”

    HTML5学堂-码匠:W3C、BFC、FOUC、Hack、GPU、Sprite、UA……各类前端术语知多少? 有不少前端开发工程师,可能并不清楚下面的部分词语,...

    HTML5学堂
  • 原型继承面试题精讲

    HTML5学堂:最近看到一道考察面向对象、原型继承的面试题,关于一只小狗狗和一只“精力旺盛”的小狗狗的故事~今天就来讲讲这个吧。 题目要求 有一条可爱的小狗(名...

    HTML5学堂
  • 2015.11.29 HTML5真题练习

    HTML5学堂:每天一道题,强壮程序员!今日的HTML5题目,主要涉及到JavaScript中的函数、函数返回值和作用域的相关知识。一起来看题目吧~! HTML...

    HTML5学堂
  • 极简主义——你手机里面还没有安装“夸克”?

    神无月
  • 软件推荐(浏览器)-IE的消失

    我曾经体验过各式各样的浏览器,写这个文章是为了帮助我的朋友在合适的场合用合适的工具浏览,我曾经在大学给很多个小姐姐修过电脑,但我看到的是绝大部分还是在用...

    丰臣正一
  • 从微软独家垄断到今天百花齐放,Web开发如何才不会被时代淘汰

    在21 世纪初期,大家基本上只使用一种浏览器、一种平台和一种屏幕分辨率。在这种情况下,你只需要使用Windows XP 上的IE6,切换一下屏幕分辨率(比如8...

    博文视点Broadview
  • JavaScript学习笔记(O)——浏览器内核介绍

    浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“解释引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如HT...

    阳光岛主
  • 极简主义者的最佳浏览器!

    PC端的浏览器课代表推荐过Chrome和Firefox,两款浏览器就占据了市场上绝大部分的市场份额,我们不想注意到都难。然而在手机端,浏览器市场更加混乱,各种“...

    课代表
  • 姬小光前端小讲堂【第005期】

    不知不觉系列教程已经到了第005期,这里向大家解释一下,昨天周日之所以没有更新,是因为周末打开的数量确实很低,看来大家周末都不喜欢学习,所以我也打算改为工作日发...

    姬小光
  • 响铃:装机量竞赛已成过去时 移动浏览器下半场该怎么玩

    移动浏览器在2G时代起就已经在功能机上大行其道。随着移动互联网深入,移动浏览器一边蓬勃发展,一边面临着“入口地位下降”的挑战,被APP取代的论调一度甚嚣尘上。

    曾响铃

扫码关注云+社区

领取腾讯云代金券