JavaScript DHTML/HTML/Text Selection

Материал из Web эксперт
Перейти к: навигация, поиск

Capturing a Text Selection

<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>
<H1>Getting Selected Text</H1>
<HR>
<P>Select some text and see how JavaScript can capture the selection:</P>
<H2>ARTICLE I</H2>
<P>
text text text text text text text text text text text text text 
</P>
</HR>
<FORM>
<TEXTAREA NAME="selectedText" ROWS=3 COLS=40 WRAP="virtual"></TEXTAREA>
</FORM>
</BODY>
</HTML>



Get selected elememnt

<html>
<head>
<script>
function selection2Element() {
    var rng = document.selection.createRange();
    var newHTML = "<span class="newSpan">" + rng.text + "</span>";
    rng.pasteHTML(newHTML);
}
</script>
</head>
<body>
<p onmouseup="selection2Element()">select me</p>
</body>
</html>



Get selecte text in one paragraph

<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 = "<span class="newSpan">" + rng.text + "</span>";
        rng.pasteHTML(newHTML);
    } else {
        alert("Please restrict selections to within a single paragraph.");
    }
}
</script>
</head>
<body>
 <p onmouseup="selection2Element()" onselectstart="saveStart()">select me</p>

</body>
</html>



Using the elementFromPoint() Method

<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">
<H1 ID="header">document.elementFromPoint() Method</H1>
<HR ID="myHR">
<P ID="instructions">Roll the mouse around the page. The coordinates
of the mouse pointer are currently atop an element<BR ID="myBR">whose ID 
is:"<SPAN ID="mySpan" STYLE="font-weight:bold"></SPAN>".</P>
<FORM ID="myForm">
<INPUT ID="myButton" TYPE="button" VALUE="Sample Button" onClick="">&nbsp;
</FORM>
<TABLE BORDER=1 ID="myTable">
<TR ID="tr1">
    <TD ID="td_A1">Cell A1</TD>
    <TD ID="td_B1">Cell B1</TD>
</TR>
<TR ID="tr2">
    <TD ID="td_A2">Cell A2</TD>
    <TD ID="td_B2">Cell B2</TD>
</TR>
<TR ID="tr3">
    <TD ID="td_A3">Cell A2</TD>
    <TD ID="td_B3">Cell B2</TD>
</TR>
</TABLE>
<H2 ID="sec1">Section 1</H2>
<P ID="p1">text.</P>
<H2 ID="sec2">Section 2</H2>
<P ID="p2">text.</P>
<DIV ID="myDIV" STYLE="position:absolute; top:340; left:300; background-color:yellow">
Here is a positioned element.</DIV>
</BODY>
</HTML>



Using the TextEdit Property

<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>
<P>Choose how much of the paragraph is to be selected when you click anywhere in it:<BR>
<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
<FONT COLOR="white">.</FONT></P>
</FORM>
<P onClick="selectChunk()">
text text text text text text text text text text text text text text 
</P>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Text_Selection&oldid=2593»