Javascript/HTML的几个问题(ContentEditable:设置装载体为可编辑,Selection and cursor style)

2012年4月2日 发表评论 阅读评论

一、元素的ContentEditable属性

        在Html中,可以将元素的contentEditable属性设置为true,这样就可以由用户来编辑这个控件的大小及内容,例如:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>新建网页 3</title>
  5. </head>
  6. <body>
  7.     
  8.     <div contentEditable="true">
  9.         <span contentEditable = "true">This span is contentEditable</span>
  10.     </div>
  11. </body>
  12. </html>

      如果要阻止选择可编辑的元素,即不让周围出现可控制的控制点,但仍然可以显示四边箭头的光标,则可以在onControlSelect事件中来阻止:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>新建网页 3</title>
  5. </head>
  6. <body>
  7.     
  8.     <div contentEditable="true">
  9.         <span contentEditable = "true" oncontrolselect="javascript:return false">This span is contentEditable</span>
  10.     </div>
  11. </body>
  12. </html>

二、关于document.selection

      1、Get Selection

            可以通过Javascript获取当前页面选择的文字或控件,大致代码如下:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  4. <title>新建网页 1</title>
  5. </head>
  6. <body>
  7.     <span> This is a Span </span>
  8.     <div> This is a div </div>
  9.     <table width="140" height="40" border="1">
  10.         <tr>
  11.             <td>a</td>
  12.             <td>c</td>
  13.         </tr>
  14.         <tr>
  15.             <td>b</td>
  16.             <td>d</td>
  17.         </tr>
  18.     </table>
  19.     <hr>
  20.     <img src="" width="30" height="30">
  21.     <input type=button onclick="getSelectText()"> value="Get Selected Text" >

  •     <script>
  •         function getSelectText()
  •         {
  •             if( document.selection.type!="none" )
  •             {
  •                 //alert( document.selection.createRange().text )
  •                 alert( document.selection.createRange().htmlText )
  •             }
  •         }
  •     </script>
  • </body>
  • </html>
  •      2、Set Selection

              利用Range的select()来选择指定的文字或元素。如下例子:

    1. <input id="txb" type="text" value="Text Box"/> 
    2. <a href="#" onclick="document.getElementById(‘txb’).select()">Select</a>

    1. <span id="spn">this is a span.</span>
    2. <a href="#" onclick="SelectText();">Select</a>
    3. <script language="javascript">
    4. function SelectText()
    5. {
    6.     var range = document.body.createTextRange();
    7.     range.findText("this is a span.");
    8.     range.select();
    9. }
    10. </script>

     

    1. <select id="slt1"><option>select</option></select>
    2. <select id="slt2"><option>select</option></select>
    3. <a href="#" onclick="SelectControl();">Select</a>
    4. <script language="javascript">
    5. function SelectControl()
    6. {
    7.     var controlRange = document.body.createControlRange();
    8.     controlRange.add(document.getElementById(‘slt1′));
    9.     controlRange.add(document.getElementById(‘slt2′));
    10.     controlRange.select();
    11. }
    12. </script>

    三、光标(鼠标/cursor)样式:

    1. <html>
    2. <head>
    3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    4. <title>新建网页 1</title>
    5. </head>

  • <body>
  •     
  •     <table width="100%" cellpadding="0" cellspacing="0" border="1">
  •         <tr><td align="center">光标/鼠标样式</td></tr>
  •         <tr><td style="cursor:auto">cursor:auto</td></tr>
  •         <tr><td style="cursor:crosshair">cursor:crosshair</td></tr>
  •         <tr><td style="cursor:pointer">cursor:pointer</td></tr>
  •         <tr><td style="cursor:hand">cursor:hand</td></tr>
  •         <tr><td style="cursor:wait">cursor:wait</td></tr>
  •         <tr><td style="cursor:help">cursor:help</td></tr>
  •         <tr><td style="cursor:no-drop">cursor:no-drop</td></tr>
  •         <tr><td style="cursor:text">cursor:text</td></tr>
  •         <tr><td style="cursor:move">cursor:move</td></tr>
  •         <tr><td style="cursor:n-resize">cursor:n-resize</td></tr>
  •         <tr><td style="cursor:s-resize">cursor:s-resize</td></tr>
  •         <tr><td style="cursor:e-resize">cursor:e-resize</td></tr>
  •         <tr><td style="cursor:w-resize">cursor:w-resize</td></tr>
  •         <tr><td style="cursor:ne-resize">cursor:ne-resize</td></tr>
  •         <tr><td style="cursor:nw-resize">cursor:nw-resize</td></tr>
  •         <tr><td style="cursor:se-resize">cursor:se-resize</td></tr>
  •         <tr><td style="cursor:sw-resize">cursor:sw-resize</td></tr>
  •         <tr><td style="cursor:not-allowed">cursor:not-allowed</td></tr>
  •         <tr><td style="cursor:progress">cursor:progress</td></tr>
  •         <tr><td style="cursor:default">cursor:default</td></tr>
  •         <tr><td style="cursor:auto">用户自定义(可用动画)  cursor: url(‘ # ’);  # = 光标文件地址   (注意文件格式必须为:.cur 或 .ani)。</td></tr>
  •     </table>
  •     
  • </body>
  • </html>

  • 转载请注明来自:[MSN Spaces]http://msn.shandian.biz/215.html

    1. 本文目前尚无任何评论.