我有点困惑为什么这段代码不起作用!
HTML标记:
<div id="diva"><b>Score</b> some <i>goals</i></div>
<div id="soda"></div>
JavaScript代码:
function GetSelectedText () {
if (window.getSelection) { // all browsers, except IE before version 9
var range = window.getSelection ();
alert (range.toString ());
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
alert (range.text);
}
}
}
var butn = document.getElementById("soda");
butn.onclick = function(){
GetSelectedText();
}
答案 0 :(得分:6)
您可能遇到的一个问题是,在某些浏览器(尤其是IE)中,当按钮的click
事件触发时,选择已被破坏。您可以通过使用mousedown
事件来解决此问题(这仍然允许销毁选择,但仅在事件处理完毕后)或making the button unselectable。
我认为你的按钮不是实际的按钮输入,因为这种行为只发生在常规元素上。
演示:http://jsfiddle.net/L9bvU/1/
function GetSelectedText () {
if (window.getSelection) { // all browsers, except IE before version 9
var range = window.getSelection ();
alert (range.toString ());
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
alert (range.text);
}
}
}
span {
background-color: #ccc;
padding: 3px;
border: solid gray 1px;
}
*[unselectable="on"] {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
<div contenteditable="true">Please select some of this text and press a button below</div>
<span onclick="GetSelectedText()">Click</span>
<span onmousedown="GetSelectedText()">Mousedown</span>
<span unselectable="on" onclick="GetSelectedText()">Click, unselectable</span>
答案 1 :(得分:3)
function getSelectedText() {
if (window.getSelection) {
txt = window.getSelection();
} else if (window.document.getSelection) {
txt =window.document.getSelection();
} else if (window.document.selection) {
txt = window.document.selection.createRange().text;
}
return txt;
}
<p onmouseup="getSelectedText(); alert(txt)">
Highlight some of this text
with the mouse select press button end release
to fire the event. </p>
这是我的方式。您只需选择文本结束警报文本或其他任何内容
有没有人知道如何在html中为整个文档设置OnMouse(事件),并且不必直接添加到html页面。
另一方面,因为我们可以改变萤火虫中的元素!&gt; -examples
答案 2 :(得分:1)
上面的代码存在两个问题。 - 你无法保证
var butn = document.getElementById("soda");
将起作用,因为它可能在文档加载完成之前执行
- 当您点击另一个不是按钮的元素时,选择将丢失。如果你改变“soda”div,那么它将起作用:
<div id="diva"><b>Score</b> some <i>goals</i></div> <div id="soda" onclick="GetSelectedText()">This will NOT work</div> <input type="button" onclick="GetSelectedText()" value="This will work"/>
但是我强烈建议你看看jQuery,因为这里有其他建议;它会让你的很多更容易!