分享程序员开发的那些事...
更新时间：2023-11-20 22:39:40
也许，您可以使用 window.getSelection（）获取全局选择对象，然后修改它？来自developer.mozilla.org的示例：
var strongs = document.getElementsByTagName（strong）;
var s = window.getSelection（）;
if（s.rangeCount> 0）s.removeAllRanges（）;
for（var i = 0; i< strongs.length; i ++）{
var range = document.createRange（）;
range.selectNode（strongs [i]）;
s.addRange（range）;
}
I've been searching high and low for something like this, but for some reason I'm having trouble making it work. I'm not sure what I'm missing or doing wrong.
References found here: http://www.satya-weblog.com/2013/11/javascript-select-all-content-html-element.html
Selecting text in an element (akin to highlighting with your mouse)
If someone could possibly spare some time would be much appreciated thanks.
I'm setting up a banner exchange for copy and pasting codes using the new bootstrap 3.0.2, prettify, and select2.js referring to a demo which was found here.
(function() {
function selectText(element) {
var doc = document
, text = element
, range, selection
;
if (doc.body.createTextRange) { //ms
range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { //all others
selection = window.getSelection();
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
preTags = document.getElementsByTagName('pre');
for(var i=0;i<preTags.length;i++) {
preTags[i].onclick = function() {selectText(this)};
}
})();
Here is a demo code I've set up.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Banners Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
<script src="js/select2.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="margin-top: 20px;"></div>
<div class="container">
<div style="margin-top:50px;"></div>
<ul class="nav nav-pills">
<li class="active"><a href="#demo1" data-toggle="tab">Demo 1</a></li>
</ul>
<div class="tab-content">
<div style="margin-top:20px;"></div>
<div class="tab-pane fade in active" id="demo1">
<p></p>
<p>Copy and Paste Code:</p>
<pre class="prettyprint linenums lang-html">
<!DOCTYPE html>
<html>
<head>
<title>Demo | Prettify.JS</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
</pre>
</div>
</div>
</div>
<div style="margin-top: 50px;"></div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
</body>
</html>
Maybe, you could use window.getSelection() to get the global Selection objects, and then modify it? Example from developer.mozilla.org:
var strongs = document.getElementsByTagName("strong");
var s = window.getSelection();
if(s.rangeCount > 0) s.removeAllRanges();
for(var i = 0; i < strongs.length; i++) {
var range = document.createRange();
range.selectNode(strongs[i]);
s.addRange(range);
}