• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 一起看看JavaScript如何获取页面上被选中的文字

一起看看JavaScript如何获取页面上被选中的文字

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了JavaScript,获取页面,被选中的文字等相关知识,希望对您有所帮助

这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法。最关键的JavaScript API是:

event.selection = window.getSelection();

这里的selection实际上是个对象,但如果我们使用 .toString()或强行转化成字符串,我们将得到被选中的文字。

$(document).ready(function () {    $(".contenttext").mouseup(function (e) {        var txt;        var parentOffset = $(this).offset();        var x = e.pageX - parentOffset.left;        var y = e.pageY - parentOffset.top;        txt = window.getSelection();        if (txt.toString().length > 1) {            alert(txt);        }    });});

如果我们把这段代码放置到下面的页面中:

<html>    <head>        <title>Get selected text with JavaScript</title>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1.0">        <script src="../js/jquery/jquery.js" type="text/javascript"></script>            </head>    <body>        <p class="contenttext">            和客户端的 JavaScript 不同的是,PHP 代码是运行在服务端的。如果您在您的服务器上建立了如上例类似的代码,则在运行该脚本后,客户端就能接收到其结果,但他们无法得知其背后的代码是如何运作的。您甚至可以将 WEB 服务器设置成让 PHP 来处理所有的 HTML 文件,这么一来,用户就无法得知服务端到底做了什么。             使用 PHP 的一大好处是它对于初学者来说及其的简单,同时也给专业的程序员提供了各种高级的特性。当您看到 PHP 长长的特性列表时,请不要害怕。您可以很快的入门,只需几个小时您就可以自己写一些简单的脚本。         </p>    </body></html>

当用鼠标选中页面中的部分文字,同时你就获取到了选中的内容,我在这里使用alert()方法将其显示出来。




分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一起来聊聊JavaScript函数柯里化
  • 在javascript中,NaN是什么类型?
  • javascript调试之console.table()
  • Javascript中常见的内置对象有哪些
  • Javascript怎么实现字符串替换星号
  • 解决JavaScript中数组排序sort不发生改变
  • Javascript怎么实现红绿灯
  • 两行 Javascript 代码生成 UUID的方法
  • Javascript怎么实现四位随机验证码
  • javascript怎么判断是否为null

相关文章

  • 2022-04-29Workerman中你不得不知道的属性reusePort
  • 2022-04-29jquery怎么判断指定子元素是否存在
  • 2022-04-29PHP7如何使用set_error_handler和set_exception_handler处理异常机制
  • 2022-04-29使用Jquery提交页面上多个表单数据的方法
  • 2022-04-29PHPcms v9调用热门文章的两种方法
  • 2022-04-29帝国cms 自定义页面 调用分类方法
  • 2022-04-29ThinkPHP中自定义错误、成功、异常提示页面的方法
  • 2022-04-29Javascript中window.close如何不提示弹窗
  • 2022-04-29教你使用在Homestead中版本管理工具切换PHP版本
  • 2022-04-29PhotoShop打造星云四射跳舞的女孩海报效果教程

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PHP中对于会话控制里的session如何使用?
    • vue简单实现转盘抽奖
    • js如何获取UEditor富文本编辑器中的图片地址
    • Linux下查看PHP配置文件php.ini的位置
    • 网站地图设计的五个技巧
    • PHP生成小程序二维码乱码怎么办
    • node_modules中如何优雅的修改依赖库?方法介绍
    • Photoshop制作绚丽的万花筒背景教程
    • 15个值得收藏的实用JavaScript代码片段(项目必备)
    • PS打造中国风水墨草书毛笔书法字体设计制作教程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有