<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="selection, selectionStart, getSelection, select, input, " />
<meta name="description" content="在一些特殊应用中，我们需要获取页面上选中的文字，但是要实现这一需求，我们不得不面对那恼人的兼容问题，本文介绍了一个兼容性较好的解决方法。同时，也提供了一个在 FireFox 下获取 input 和 textarea 中选中文字的解决方案。" />
<title>Javascript 获取页面上选中的文字 - selection, selectionStart, getSelection, select, input, </title>
</head>
<body>
<div id="example">
<h3 id="example_title">Javascript 获取页面上选中的文字</h3>
<div id="example_main">
<!--************************************* 实例代码开始 *************************************-->
<script type="text/javascript">
function getSelectedText() {
if (window.getSelection) {
// This technique is the most likely to be standardized.
// getSelection() returns a Selection object, which we do not document.
return window.getSelection().toString();
}
else if (document.getSelection) {
// This is an older, simpler technique that returns a string
return document.getSelection();
}
else if (document.selection) {
// This is the IE-specific technique.
// We do not document the IE selection property or TextRange objects.
return document.selection.createRange().text;
}
}
function getTextFieldSelection(e) {
if (e.selectionStart != undefined && e.selectionEnd != undefined) {
var start = e.selectionStart;
var end = e.selectionEnd;
return e.value.substring(start, end);
}
else return ""; // Not supported on this browser
}
function doGetSelectedText() {
var text = getSelectedText();
document.getElementById('output').innerHTML = text;
}
function doGetTextFieldSelection() {
var el = document.getElementById('tempText');
var text = getTextFieldSelection(el);
document.getElementById('output').innerHTML = text;
}
window.onload = function() {
document.getElementById('getSelectedText').onclick = doGetSelectedText;
document.getElementById('getTextFieldSelection').onclick = doGetTextFieldSelection;
}
</script>
<h2>请选中页面上的文字后点击下面的按钮：</h2>
<div id="output" style="color:#FF0000;font-weight:bold;"></div>
<p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。</p>
<p>本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。</p>
<br />
<textarea rows="8" cols="80" id="tempText">在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。</textarea>
<br /><br />
<input type="button" value="获取选中的内容" id="getSelectedText" />
<input type="button" value="FireFox 下获取文本框里选中的内容" id="getTextFieldSelection" />
<br />
<!--************************************* 实例代码结束 *************************************-->
</div>
</div>
<br />
</body>
</html>
分享到：
相关推荐
让我们深入探讨如何利用这些技术来实现“通过js获取本地文件夹中的文件列表”。 首先，我们要明确的是，JavaScript无法直接遍历本地目录，除非在特定的沙盒环境中，如使用Chrome的实验性File System Access API。这...
在提供的HTML文件"JS获取文本框光标位置、选中起始位置、终止位置、选择内容.html"中，应该包含了一个示例，演示了如何使用这些方法来实时显示选中区域的信息。你可以打开这个文件，通过实践来更好地理解和应用这些...
综上所述，"js弹出窗口"和"获取上传文件全路径"是JavaScript在网页交互中两个重要的技术点。弹出窗口提供了与用户交互的方式，而文件上传则涉及到用户数据的安全处理。在实际开发中，理解并熟练运用这些技术，可以...
当用户选择文件后，我们可以监听`change`事件，获取到选中的文件信息。在JavaScript中，我们可以通过`document.getElementById('fileSelector')`来获取到这个元素，然后添加事件监听器： ```javascript const ...
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。在本文中，我们将深入探讨如何使用jQuery来获取checkbox选中的值，包括全选、取消全选、反选以及选中奇数行的...
在 JSP 页面中，我们想要获取文件的路径，使用 JS 代码来实现该功能。然而，在 IE 浏览器中，却出现了问题，无法正确读取文件路径。网上搜索后发现，这是由于 IE8、9 的安全问题所引起的。 问题原因 在 IE9 下，...
现在，让我们看看如何使用JavaScript来获取选中的选项的值。主要有两种方法： ### 方法一：通过ID获取 如果你知道下拉列表的ID，你可以直接通过`document.getElementById()`来访问它，然后使用`.value`属性获取...
"js获取input file 图片立即显示"这个话题就是关于如何利用JavaScript来实现在用户选择图片后即时预览的功能。以下是一个详尽的步骤解释和相关知识点： 1. **HTML 结构**： 首先，我们需要在HTML页面中创建一个`...
当用户选择文件后，我们可以通过JavaScript获取到选中的文件对象。在HTML中，我们可以这样创建一个文件输入元素： ```html ``` 接着，我们可以通过JavaScript监听`change`事件，当用户选择文件后触发预览操作： ...
接下来，`pdf.js坐标点`是指PDF.js库提供的API，例如`page.getTextContent()`方法，用于获取页面上的文本内容及其布局信息。返回的对象包含一系列的`Item`，每个`Item`代表一行文本或者一个单独的字符，包含其几何...
"JS实现选中一级复选框相关二级或父级同时被选"这个功能就是一种典型的树形结构数据的复选框关联逻辑，它涉及到JavaScript编程和DOM操作。 首先，我们需要理解这个功能的基本需求：当用户选中一级复选框时，其相关...
总结起来，"js读取图片分辨率demo"是一个使用JavaScript和`exif.js`库来读取并显示图片分辨率的实例，它展示了如何通过FileReader API读取文件，以及如何解析图片的EXIF信息来获取分辨率。这对于开发涉及图片处理的...
根据提供的文件信息，我们可以总结出一系列关于如何使用jQuery来获取不同类型的表单元素（如文本框、单选按钮、复选框以及下拉列表）的值的方法。下面将详细介绍这些方法及其应用场景。 ### 一、获取文本框(input ...
当用户选择文件后，该元素会触发`change`事件，并且可以通过`event.target.files`属性获取到选中的文件列表。 2. **创建FileReader对象**：接下来，创建一个`FileReader`对象并调用其`readAsText()`方法（如果文件...
标题中的“JavaScript html js页面刷新之后下拉菜单选中值不变”是一个常见的前端开发问题，涉及到浏览器缓存、页面状态保持以及JavaScript操作DOM元素的知识点。在这个场景中，开发者希望在用户选择下拉菜单的一项...
在JavaScript（简称js）中实现文件上传功能是Web开发中的常见需求，特别是在现代网页应用中，用户可能需要上传图片、文档等数据。本教程将详细讲解如何利用js实现这一功能，以及涉及到的关键技术和库。 首先，`js...
用户在网页上选中的文字，可以通过JavaScript获取。在JavaScript中，`window.getSelection()`或`document.getSelection()`方法可以获取到当前选中的文本。例如： ```javascript var selectedText = window....