ContentEditable,Selection and cursor style

今天在解决一个问题时用到的几个Javascript/Html的知识点,简单总结一下:



一、元素的ContentEditable属性

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

<html> 

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

<body> 
     
    <div contentEditable="true"> 
        <span contentEditable = "true">This span is contentEditable</span> 
    </div> 

</body> 

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

<html> 

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

<body> 
     
    <div contentEditable="true"> 
        <span contentEditable = "true" oncontrolselect="javascript:return false">This span is contentEditable</span> 
    </div> 

</body> 

</html>
二、关于document.selection

      1、Get Selection

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

<html> 

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

<body> 
    <span> This is a Span </span> 
    <div> This is a div </div> 
    <table width="140" height="40" border="1"> 
        <tr> 
            <td>a</td> 
            <td>c</td> 
        </tr> 
        <tr> 
            <td>b</td> 
            <td>d</td> 
        </tr> 
    </table> 
    <hr> 
    <img src="" width="30" height="30"> 
    <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()来选择指定的文字或元素。如下例子:

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

<span id="spn">this is a span.</span> 
<a href="#" onclick="SelectText();">Select</a> 
<script language="javascript"> 
function SelectText() 
{ 
    var range = document.body.createTextRange(); 
    range.findText("this is a span."); 
    range.select(); 
} 
</script>
 

<select id="slt1"><option>select</option></select> 
<select id="slt2"><option>select</option></select> 
<a href="#" onclick="SelectControl();">Select</a> 
<script language="javascript"> 
function SelectControl() 
{ 
    var controlRange = document.body.createControlRange(); 
    controlRange.add(document.getElementById('slt1')); 
    controlRange.add(document.getElementById('slt2')); 
    controlRange.select(); 
} 
</script>
三、光标(鼠标/cursor)样式:

<html> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>新建网页 1</title> 
</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>

你可能感兴趣的:(JavaScript,html,C++,c,C#)