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=buttonvalue="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="#" >Select</a> <span id="spn">this is a span.</span> <a href="#" >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="#" >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>
页:
[1]