求助高手!!问题有挑战性!!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var oRange; // save the current textrange
var intCount = 0; // this pos of current textrange in the total count
var intTotalCount = 0; // total count
<!--
//==============================================
//function : fnSearch()
//comment  : Search the text
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnSearch() { var strBeReplaced;
var strReplace; strBeReplaced = fm1.txtarea2.value;
strReplace = fm1.txtarea3.value; fnNext(); fm1.txtarea1.focus();
oRange = fm1.txtarea1.createTextRange(); //Create a textRange for the Textarea
// Find the text by findtext method
for (i=1; oRange.findText(strBeReplaced)!=false; i++) {
if(i==intCount){
oRange.select(); // select the finded text
oRange.scrollIntoView(); // scroll the page and set the text Into View 
break;
}
oRange.collapse(false); //
}
}//==============================================
//function : fnSearch()
//comment  : set the flag to the next textrange
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnNext(){ if (intCount > 0 && intCount < intTotalCount){
intCount = intCount + 1;
}
else{
intCount = 1 ;
}
}//==============================================
//function : init()
//comment  : initialize at page onload to get the count
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function init(){ var oRange ;
var strBeRepalced; oRange = fm1.txtarea1.createTextRange(); //Create a textRange for the Textarea
strBeReplaced = fm1.txtarea2.value; for (i=0; oRange.findText(strBeReplaced)!=false; i++) {
     oRange.collapse(false); // Moves the insertion point to the end of the text range.
} intTotalCount = i ;}//==============================================
//function : fnReplace()
//comment  : replace the text of the selected textrange
//param    : none
//return   : none
//author   : Fantiny
//Date     : 10/21/2005
//==============================================
function fnReplace(){ var strReplace;

strReplace = fm1.txtarea3.value; // if the textrange is exist, replace the text
if(oRange!= null && typeof(oRange)=="object" && intTotalCount > 0){
oRange.text = strReplace;
intCount = intCount - 1;
intTotalCount = intTotalCount - 1;
oRange = null;
}
}function chk(){
oRange.select(); // select the finded text
oRange.scrollIntoView(); // scroll the page and set the text Into View 
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="init()" onclick="chk()">
<FORM METHOD=POST name="fm1">
<textarea NAME="txtarea1" ROWS="20" COLS="50">
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
this is the original text, and this is the string will be repalced.
</textarea>
<TEXTAREA NAME="txtarea2" ROWS="20" COLS="50"> will be </TEXTAREA>
<TEXTAREA NAME="txtarea3" ROWS="20" COLS="50"> has been </TEXTAREA>
<input type="button" value="search" onclick="fnSearch()">
<input type="button" value="Replace" onclick="fnReplace()">
</FORM></BODY>
</HTML>

解决方案 »

  1.   

    我这个只有点击search按钮后的选择范围符合你的要求，不过你可以自己改一下。
    把你的选择的范围作为一个range来保存
      

  2.   

    2楼说的有点对.但是鼠标移到编辑区外是为了输入文本框,而改变选中对象的属性,所以不能用按钮!就像我们网页编辑用的 Dreamweaver FX2004 一样.
    要不大家把QQ号留下吧.咱们进一步讨论一下!
      

  3.   

    我觉得可以这样来解决，所有的编辑功能都是通过编辑器上的那些工具按钮提供的，我们可以在那些需要进行更多操作的按钮的点击事件中保存现在的textrange，这样就能解决这个问题
      

  4.   

    <html>
    <head>
    <title>ContentEditable Demo</title>
    <script>
    // Makes button look sunken when button is clicked
    function BtnDown()
    {
    window.event.srcElement.style.borderStyle = "inset";
    }// Makes button look raised when button is released
    function BtnUp()
    {
    window.event.srcElement.style.borderStyle = "outset";
    }// Executes commands depending on which button has been pushed
    function Toggle()
    {
    // get button label
    text = window.event.srcElement.innerText;

    if (text == "ContentEditable")
    {
    if (document.all("edit").contentEditable == "true")
    {
    document.all("edit").contentEditable = "false";
    window.event.srcElement.style.borderStyle = "outset";
    }
    else
    {
    document.all("edit").contentEditable = "true";
    window.event.srcElement.style.borderStyle = "inset";
    }

    return;
    } else if (text == "Bold")
    document.execCommand("Bold"); else if (text == "Italic")
    document.execCommand("Italic"); else if (text == "FontColor")
    {
    theColor = document.all.fontcolor.value;
    if (theColor != "")
    document.execCommand("ForeColor", false, theColor);
    }

    else if (text == "FontSize")
    {
    theSize = document.all.fontsize.value;
    if (theSize != "")
    document.execCommand("FontSize", false, theSize);
    }

    else if (text == "FontName")
    {
    theName = document.all.fontname.value;
    if (theName != "")
    document.execCommand("FontName", false, theName);
    } else if (text == "InsertImage")
    {
    theImg = document.all.imagepath.value;
    if (theImg != "")
    document.execCommand("InsertImage", false, theImg);
    } window.event.srcElement.style.borderStyle = "outset";
    }
    </script>
    <style>
    #edit {
    position:absolute;
    top: 25;
    left: 225;
    width: 350;
    height: 350;
    border:solid;
    border-style:ridge;
    border-width:5;
    background-color:white;
    }
    .btn {
    border:solid;
    border-style:outset;
    border-width:thin; font-weight:bold;
    padding:2;
    color:white;
    background-color:#336699;
    cursor:default;
    }

    </style>
    </head><body bgcolor="#cc9966" unselectable="on"><div unselectable="on">
    <br><span unselectable="on" class="btn" onmouseup="Toggle();" style="border-style:inset">ContentEditable</span>
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Bold</span>
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">Italic</span>
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontColor</span>
    <input type="text" id="fontcolor" size="10" value="red">
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontSize</span>
    <input type="text" id="fontsize" size="1" value="7">
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">FontName</span>
    <input type="text" id="fontname" size="14" value="comic sans ms">
    <br><br><span unselectable="on" class="btn" onmousedown="BtnDown();" onmouseup="Toggle();" onmouseout="BtnUp();">InsertImage</span>
    <input type="text" id="imagepath" size="14" value="/workshop/graphics/cone.jpg">
    <br><br>
    </div>
    <div id="edit" contentEditable="true">
    <p>This text is inside the editable region.</p>
    </div></body>
    </html>
      

  5.   

    <body><script>
    document.body.onmouseover=function(){
      event.srcElement.className="与众不同的样式";
    }
    </script>
    </body>