如何用js脚本实现按钮先获得鼠标所选的内容并实现上下标功能

我想给一个按钮做一个实现把鼠标在网页上选中的内容通过自己设计的一个上下标按钮来，实现上下标功能，不知道能不能实现，第一步：是先用js获得鼠标所选的内容吧，这怎么实现呢，关于上面的问题，大家有好的建议么？第二步是把选的内容 通过按钮功能变成上下标，例 ：<sub>X</sub>,x是鼠标选中的内容

解决方案 »

  1.   

    现在我已将鼠标选取的内容 获取出来了：var x=document.selection.createRange().text;alert(x);
      

  2.   

    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
      我想给一个按钮做一个实现把鼠标在网页上选中的内容通过自己设计的一个上下标按钮来，实现上下标功能，不知道能不能实现，第一步：是先用js获得鼠标所选的内容吧，这怎么实现呢，关于上面的问题，大家有好的建议么？第二步是把选的内容 通过按钮功能变成上下标，例：<sub>X</sub>,x是鼠标选中的内容
      <input type="button" value="上标" id="btnSup" />
      <input type="button" value="下标" id="btnSub" />
      <script type="text/javascript">
      <!--
    var $ = document.getElementById;
    $("btnSup").onclick = function() {
    document.selection.createRange().pasteHTML("<sup>" + document.selection.createRange().text + "</sup>");
    };
    $("btnSub").onclick = function() {
    document.selection.createRange().pasteHTML("<sub>" + document.selection.createRange().text + "</sub>");
    };
      //-->
      </script>
     </body>
    </html>
    Web 开发常用手册JScript语言参考.rar
    http://download.csdn.net/source/308916DHTML参考手册.rar
    http://download.csdn.net/source/308913样式表中文手册.chm
    http://download.csdn.net/source/304124
      

  3.   

    简化一下！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
      我想给一个按钮做一个实现把鼠标在网页上选中的内容通过自己设计的一个上下标按钮来，实现上下标功能，不知道能不能实现，第一步：是先用js获得鼠标所选的内容吧，这怎么实现呢，关于上面的问题，大家有好的建议么？第二步是把选的内容 通过按钮功能变成上下标，例：<sub>X</sub>,x是鼠标选中的内容
      <input type="button" value="上标" id="btnSup" />
      <input type="button" value="下标" id="btnSub" />
      <script type="text/javascript">
      <!--
    var $ = document.getElementById;
    $("btnSup").onclick = function() {
    var range = document.selection.createRange();
    range.pasteHTML("<sup>" + range.text + "</sup>");
    };
    $("btnSub").onclick = function() {
    var range = document.selection.createRange();
    range.pasteHTML("<sub>" + range.text + "</sub>");
    };
      //-->
      </script>
     </body>
    </html>
      

  4.   

    试了，把代码复制进我的程序，不好使
    range.pasteHTML("<sup>" + range.text + "</sup>");
    这句话没执行
      

  5.   

    俺在 #3 的代码 IE 7 下测试通过，而且只在 IE 下可用，其他浏览器不能保证！
      

  6.   


    请参考 DHTML参考手册 中 sub 和 sup 标记的解释！Web 开发常用手册JScript语言参考.rar
    http://download.csdn.net/source/308916DHTML参考手册.rar
    http://download.csdn.net/source/308913样式表中文手册.chm
    http://download.csdn.net/source/304124
      

  7.   

    我找到不能执行的原因了，我查找了源代码：range.pasteHTML("<sub>+range.text+</sub>")在执行时被翻译成了range.pasteHTML(\'<sub>+range.text+</sub>\');
    这怎么办呢
      

  8.   

     <TD style="TEXT-ALIGN: center" id="B3_M1">
                              <INPUT value="上标" settool="0" btnType="btnUserDef" title="自定义" type="button" class="ButtonOn" onclick="var range = document.selection.createRange();range.pasteHTML(\'<sup>\' + range.text + \'</sup>\');btnClick(this);" style="WIDTH: 50px; HEIGHT: 20px" id="_B3_M1">
                            
                            </TD>
      

  9.   

    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
    我想给一个按钮做一个实现把鼠标在网页上选中的内容通过自己设计的一个上下标按钮来，实现上下标功能，不知道能不能实现，第一步：是先用js获得鼠标所选的内容吧，这怎么实现呢，关于上面的问题，大家有好的建议么？第二步是把选的内容 通过按钮功能变成上下标，例 ： <sub>X </sub>,x是鼠标选中的内容
      <table border=1>
    <tr>
    <TD style="TEXT-ALIGN: center" id="B3_M1"> 
                              <INPUT value="上标" settool="0" btnType="btnUserDef" title="自定义" type="button" class="ButtonOn" onclick="var range = document.selection.createRange();range.pasteHTML(' <sup>' + range.text + ' </sup>');" style="WIDTH: 50px; HEIGHT: 20px" id="_B3_M1"> 
                            
                            </TD>
    <td>2</td>
    </tr>
    <tr>
    <td>3</td>
    <td>4</td>
    </tr>
      </table>
     </body>
    </html>
      

  10.   

    问题出在：你的例子 在网页上获得鼠标选中的内容可实现上下标，我在你的例子 里面加了一行<input type="text" value="123" />，对于文本框里的内容，就不能实现上下标，不知道我试验的对不对，你试试看 
      

  11.   

    因为 input/text 根本没有 innerHTML 属性，只能修改其 text 属性！另，#2 有手册《DHTML参考手册》，请仔细查阅！俺是一边查手册一边写代码滴！L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
     </head> <body>
     <input type="text" value="123" />
     <INPUT value="上标" type="button" class="ButtonOn" onclick="var range = document.selection.createRange();range.text=' <sup>' + range.text + ' </sup>';" />
    我想给一个按钮做一个实现把鼠标在网页上选中的内容通过自己设计的一个上下标按钮来，实现上下标功能，不知道能不能实现，第一步：是先用js获得鼠标所选的内容吧，这怎么实现呢，关于上面的问题，大家有好的建议么？第二步是把选的内容 通过按钮功能变成上下标，例 ： <sub>X </sub>,x是鼠标选中的内容
      <table border=1>
        <tr>
            <TD style="TEXT-ALIGN: center" id="B3_M1"> 
                              <INPUT value="上标" settool="0" btnType="btnUserDef" title="自定义" type="button" class="ButtonOn" onclick="var range = document.selection.createRange();range.pasteHTML(' <sup>' + range.text + ' </sup>');" style="WIDTH: 50px; HEIGHT: 20px" id="_B3_M1"> 
                            
                            </TD>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
      </table>
     </body>
    </html>
      

  12.   

    input/text 文本框不可以实现显示上下标，
    可以将input/text换成iframe标签到可以，
    <sup></sup>在text文本框中是不能被解析的。
      

  13.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="javascript" type="text/javascript">
    /*
    *将Iframe内容显示到textarea中
    */
    function getIframeData(){ 
      document.getElementById("test").value = HtmlEdit.document.body.innerHTML;
    }

    /*
    *将textarea内容显示到Iframe中
    */
    function sentIframeData(){
      HtmlEdit.document.body.innerHTML = document.getElementById("test").value;
    } 

    /*
    *将字符串转换为上标
    */
    function doSup(){
    //设定Iframe为焦点
      HtmlEdit.focus();
      //将选中的内容插入上标标记
      insertHTML("superscript");
    }   

    /*
    *将字符串转换为下标
    */
    function doSub(){
    //设定Iframe为焦点
      HtmlEdit.focus(); 
      //将选中的内容插入下标标记 
      insertHTML("subscript");
    }

    /*
    *在Iframe内容中插入HTML标记
    * @Parma action HTML标记代码
    *    Parma示例 ： superscript 插入上标<SUP>...</SUP>
    *              subscript  插入下标<SUB>...</SUB>
    */
    function insertHTML(action) {
      HtmlEdit.document.execCommand(action);
    }  
     
    /*
    *重写HTML文档的onreadystatechange事件，使Iframe可编辑
    */
    function document.onreadystatechange()
    {
    //将Iframe的文本编辑功能开放
      HtmlEdit.document.designMode="On";
    }  
    </script>
    </head> <body> 
    注：在Iframe中录入内容，选择需要变成上标/下标的内容，点击上标或是下标，完成操作
    <hr>
    我是Iframe:&nbsp;&nbsp;&nbsp;
    <IFRAME id="HtmlEdit" style="WIDTH: 300px; HEIGHT: 30px" marginWidth="0" marginHeight="0">
    </IFRAME>&nbsp;&nbsp;&nbsp;
    <input type="button" value="上标" onClick="doSup()">
    <input type="button" value="下标" onClick="doSub()">
    <hr>
    <br>
    我是textarea:&nbsp;<textarea name="test" rows="1" id="test" style="width:300px;height: 40px"></textarea>
    <br>
    <hr> 
    <input type="button" value="iframe内容显示到textarea" onClick="getIframeData()">
    <input type="button" value="textarea内容显示到iframe" onClick="sentIframeData()"> 
    </body>
    </html>