document.selection只有IE支持,
window.getSelection()也只有FireFox和Safari支持,都不是标准语法。
selection 对象代表了当前激活选中区,即高亮文本块,或文档中用户可执行某些操作的其它元素。selection 对象的典型用途是作为用户的输入,以便识别正在对文档的哪一部分正在处理,或者作为某一操作的结果输出给用户。
用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区,请对document对象应用selection关键字。要对选中区执行操作,请先用createRange方法从选中区创建一个文本区域对象。document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。selection.type选中内容的类型。 //document.selection.createRange().parentElement().name。
一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本或元素块。尽管空的选中区不包含任何内容,你仍然可以用它作为文档中的位置标志。
1、一个简单的例子(对选中的文本执行加粗命令 , 该脚本只在IE下有效)
XML/HTML代码
<html> |
2、查看选择的内容
XML/HTML代码
<html> <head> <title>a test for selection object</title> </head> <body> <script language='javascript'> function showSelectContent(isIncludingHtmlTag) { var textSelection = document.selection.createRange(); if (isIncludingHtmlTag) alert(textSelection.htmlText); else alert(textSelection.text); return false; } </script> <a href='#' οnmοuseup='javascript:showSelectContent(0);'> select me. show selecting text <br /> <a href='#' οnmοuseup='javascript:showSelectContent(1);'> select me. show selecting htmlText </body> </html> |
3、清除选中的内容
XML/HTML代码
<html> <head> <title>a test for selection object</title> </head> <body> <script language='javascript'> function clearSelectionContent() { document.selection.clear(); } </script> <form> <textarea cols=20 rows=5> please select the whole me or parts of me , if you want to delete me. </textarea> <button type='button' οnclick='javascript:clearSelectionContent();'> delete selected contents </buton> </form> </body> </html> |
4、通过脚本选择内容
XML/HTML代码
<html> <head> <title>a test for selection object</title> </head> <body> <script language='javascript'> function selectionContentByScript() { var t=document.getElementById("test"); var o=t.createTextRange(); //o.moveStart("character",2); o.select(); } </script> <form> <input id='test' type='text' value='will be selected' /> <br /> <input type='button' οnclick='javascript:selectionContentByScript();' value='select the text box value' /> </form> </body> </html> |