使用 JavaScript 选择一个段落(单击时)?

2024-01-03

是否可以选择一个元素的所有文本(例如,一个段落)<p>)与 JavaScript?很多人认为 jQuery.select()会这样做,但事实并非如此。它只是触发一个事件。请注意,DOM 对象<input>元素有一个原生的select()方法,但大多数其他元素(例如<output> and <p>) 不要。

(我需要使用content-editable让它发挥作用?)


您可以使用Range.selectNodeContents 范围.selectNodeContents https://developer.mozilla.org/en-US/docs/Web/API/Range/selectNodeContents

document.querySelector('button').addEventListener('click', function(){
    var range = document.createRange();
    var selection = window.getSelection();
    range.selectNodeContents(document.querySelector('p'));
    
    selection.removeAllRanges();
    selection.addRange(range);
});
                                          
                                          
                                          
                                          
Hello <p>Select me</p> World
<button id ='btn'>Select text</button>

相关链接:

  • 规格:http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-selectNodeContents http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-Range-method-selectNodeContents
  • http://help.dottoro.com/ljcpcpnt.php http://help.dottoro.com/ljcpcpnt.php
  • https://developer.mozilla.org/en-US/docs/Web/API/range.selectNodeContents https://developer.mozilla.org/en-US/docs/Web/API/range.selectNodeContents
  • https://developer.mozilla.org/en-US/docs/Web/API/Selection.addRange https://developer.mozilla.org/en-US/docs/Web/API/Selection.addRange

有关所有浏览器的支持,请参阅https://github.com/timdown/rangy https://github.com/timdown/rangy from https://stackoverflow.com/users/96100/tim-down https://stackoverflow.com/users/96100/tim-down

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 JavaScript 选择一个段落(单击时)? 的相关文章

  • 如何仅将网站的特定部分放入 iframe 中?

    我只想将网站的一小部分放入 iframe 中 我该怎么做 通常 当我为网站 假设是雅虎 设置 iframe 时 它 会获取整个网站 假设我只想要网站的一小部分 我该怎么做 是否可以在网站的 iframe 上添加边距 我想在我的网站上放置一个
  • 带有嵌入式 Ruby 的 Javascript:如何安全地将 ruby​​ 值分配给 javascript 变量

    我在页面的 javascript 块中有这一行 res foo 处理这种情况的最佳方法是什么 ruby var里面有单引号吗 否则会破坏 JavaScript 代码 我想我会用红宝石JSON http json org ruby var 上
  • 如何使用 CSS 将 div 置于表格中心?

    我正在尝试向我的网站之一添加幻灯片 整个页面布局在一个 HTML 表格中 我非常讨厌它并且没有选择 我想将我的幻灯片放在该特定列的中心 我的 CSS 如下所示 slideshow position relative slideshow IM
  • 转换 SVG 过滤器

    我正在尝试创建一个像 SVG 圆圈上的阴影这样的材质设计 我希望当您单击圆圈时 这个阴影能够以良好的过渡来增长 但目前我正在努力弄清楚是否可以为这种过渡设置动画 所以我希望有人能够提供帮助 我添加了一个到目前为止所得到的小例子 一个带有阴影
  • 如何用 jQuery 替换击键?

    我需要能够用 jQuery 替换击键 当按下右箭头时 我希望改为按下 Tab 键 到目前为止我有
  • 将 Isotope 与通过 XML 和 jQuery 加载的对象一起使用。这可能吗?

    我正在使用 XML 和 jQuery 加载对象 并尝试连接到同位素 但似乎这是不行的 这可能吗 我尝试了许多不同的解决方案 但似乎找不到有效的解决方案 这就是我所拥有的 我已经尝试过同位素中的回调函数 但仍然没有运气 我用 XML 调用我的
  • Relay 中的嵌套片段数据始终相同

    我是 Relay 新手 并且遇到了片段上嵌套数据的问题 当我在 graphiql 中进行测试时 以下查询返回正确的数据 因此我确信我的架构是正确的 viewer customers name billing address city 但是
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 用于导出到 CSV/Excel 的数据 URI(无服务器端请求):浏览器支持/限制?

    以下问题 Javascript 或 Flash 导出至 CSV Excel https stackoverflow com questions 8150516 javascript or flash export to csv excel
  • Rails 4 - 带有 dependent-fields-rails 的条件 JS

    我正在尝试弄清楚如何在我的 Rails 4 应用程序中使用 dependent fields rails gem 我迷路了 我已将 underscore js 包含在我的供应商 javascripts 文件夹中 并更新了我的 applica
  • 对数字和字母元素的数组进行排序(自然排序)

    假设我有一个数组 var arr 1 5 ahsldk 10 55 3 2 7 8 1 2 75 abc huds 我尝试对其进行排序 我得到了类似的东西 1 1 10 2 2 3 5 55 7 75 8 abc ahsldk huds 注
  • 在IOS中,引导模式中的iframe无法滚动

    我在引导程序模态体内有一个 iframe div class modal fade div class modal dialog div class modal content div class modal header div div
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 页面不会居中对齐

    我遇到了 CSS 问题 http www luukratief design nl dump parallax index html http www luukratief design nl dump parallax index htm
  • IE6 丢失查询字符串

    我有一个使用 javascript 从查询字符串中获取值的页面window location 从网络服务器运行时效果很好 但如果我通过将其放在地址栏中使用 IE6 在本地运行它 c mysite index htm 网站创建的任何查询字符串
  • 单击react.js 切换列表的背景颜色

    我正在尝试创建一个具有以下功能的列表 悬停时更改列表项的背景颜色 单击时更改列表项的背景颜色 在单击的元素之间切换背景颜色 即列表中只有一个元素可以具有 clicked 属性 我已经执行了 onhover 1 和 2 功能 但无法实现第三个
  • 在 中动态添加链接样式表 [关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 如何将链接
  • 盒式捆绑包与 MVC4 捆绑包

    我目前正在开发一个原型 ASP NET MVC 3 解决方案 该解决方案将用作多个项目重写的基础 来自 Web 表单 我的目标之一是跨应用程序实现一些脚本管理 而不是我们目前没有的目标 MVC 3有一个缺陷恕我直言 如果您需要在部分视图或模
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • 使用 stopPropagation() 处理 React 事件委托

    我有一个 React 项目 应该可以放置在任何网站上 我的想法是 我托管一个 javascript 文件 人们放置一个具有特定 ID 的 div 然后 React 在该 div 中进行渲染 到目前为止 除了点击事件之外 这是有效的 这些事件

随机推荐