JavaScript DHTML/HTML/Text Selection
Содержание
Capturing a Text Selection
<source lang="html4strict">
<HTML> <HEAD> <TITLE>Getting Selected Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> var isNav4 = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) == 4) var isNav4Min = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4) var isIE4Min = (navigator.appName.indexOf("Microsoft") != -1 && parseInt(navigator.appVersion) >= 4) function showSelection() {
if (isNav4Min) {
document.forms[0].selectedText.value = document.getSelection()
} else if (isIE4Min) {
if (document.selection) {
document.forms[0].selectedText.value =
document.selection.createRange().text
event.cancelBubble = true
}
}
} if (isNav4) {
document.captureEvents(Event.MOUSEUP)
} document.onmouseup = showSelection </SCRIPT> </HEAD> <BODY>
Getting Selected Text
Select some text and see how JavaScript can capture the selection:
ARTICLE I
text text text text text text text text text text text text text
</HR> <FORM> <TEXTAREA NAME="selectedText" ROWS=3 COLS=40 WRAP="virtual"></TEXTAREA> </FORM> </BODY> </HTML>
</source>
Get selected elememnt
<source lang="html4strict">
<html> <head> <script> function selection2Element() {
var rng = document.selection.createRange();
var newHTML = "" + rng.text + "";
rng.pasteHTML(newHTML);
} </script> </head> <body>
select me
</body> </html>
</source>
Get selecte text in one paragraph
<source lang="html4strict">
<html> <head> <script> // global var selectionStart; // invoked by onselectstart function saveStart() {
selectionStart = event.srcElement;
} // invoked by onmouseup function selection2Element() {
if (event.srcElement == selectionStart) {
var rng = document.selection.createRange();
var newHTML = "" + rng.text + "";
rng.pasteHTML(newHTML);
} else {
alert("Please restrict selections to within a single paragraph.");
}
} </script> </head> <body>
select me
</body> </html>
</source>
Using the elementFromPoint() Method
<source lang="html4strict">
<HTML> <HEAD> <TITLE>document.elementFromPoint() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> function showElemUnderneath() {
var elem = document.elementFromPoint(event.clientX, event.clientY) document.all.mySpan.innerText = elem.id
} document.onmouseover = showElemUnderneath </SCRIPT> </HEAD> <BODY ID="myBody">
document.elementFromPoint() Method
Roll the mouse around the page. The coordinates
of the mouse pointer are currently atop an element
whose ID
is:"".
<FORM ID="myForm"> <INPUT ID="myButton" TYPE="button" VALUE="Sample Button" onClick=""> </FORM>
| Cell A1 | Cell B1 |
| Cell A2 | Cell B2 |
| Cell A2 | Cell B2 |
Section 1
text.
Section 2
text.
</BODY> </HTML>
</source>
Using the TextEdit Property
<source lang="html4strict">
<HTML> <HEAD> <TITLE>parentTextEdit Property</TITLE> <SCRIPT LANGUAGE="JavaScript"> function selectChunk() {
var chunk, range
var x = window.event.clientX
var y = window.event.clientY
for (var i = 0; i < document.forms[0].chunk.length; i++) {
if (document.forms[0].chunk[i].checked) {
chunk = document.forms[0].chunk[i].value
break
}
}
if (window.event.srcElement.parentTextEdit) {
range = window.event.srcElement.parentTextEdit.createTextRange()
range.collapse()
range.moveToPoint(x, y)
range.expand(chunk)
range.select()
}
} </SCRIPT> </HEAD> <BODY BGCOLOR="white"> <FORM>
Choose how much of the paragraph is to be selected when you click anywhere in it:
<INPUT TYPE="radio" NAME="chunk" VALUE="character" CHECKED>Character
<INPUT TYPE="radio" NAME="chunk" VALUE="word">Word
<INPUT TYPE="radio" NAME="chunk" VALUE="sentence">Sentence
.
</FORM>
text text text text text text text text text text text text text text
</BODY> </HTML>
</source>
