document.selection 对象含义及简单应用实例
2014-02-12 18:22
309 查看
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下有效）
<html>
<head>
<title>a test for selection object</title>
</head>
<body>
<script language='javascript'>
function test()
{
var textSelection = document.selection.createRange();
textSelection.execCommand('Bold');
}
</script>
<div onmouseup = "javascript:test();">select me.... , I will be bold..</div>
</body>
</html>
2、查看选择的内容
<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='#' onmouseup='javascript:showSelectContent(0);'>
select me. show selecting text
<br />
<a href='#' onmouseup='javascript:showSelectContent(1);'>
select me. show selecting htmlText
</body>
</html>
3、清除选中的内容
<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' onclick='javascript:clearSelectionContent();'>
delete selected contents
</buton>
</form>
</body>
</html>
4、通过脚本选择内容
<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' onclick='javascript:selectionContentByScript();' value='select the text box value' />
</form>
</body>
</html>
selection 对象代表了当前激活选中区，即高亮文本块，或文档中用户可执行某些操作的其它元素。selection 对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。
用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用 select 方法。要获取当前选中区，请对 document 对象应用 selection关键字。要对选中区执行操作，请先用 createRange() 方法从选中区创建一个文本区域对象。document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回
ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。selection.type 选中内容的类型。 //document.selection.createRange().parentElement().name。
一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。
1、一个简单的例子（对选中的文本执行加粗命令 , 该脚本只在IE下有效）
<html>
<head>
<title>a test for selection object</title>
</head>
<body>
<script language='javascript'>
function test()
{
var textSelection = document.selection.createRange();
textSelection.execCommand('Bold');
}
</script>
<div onmouseup = "javascript:test();">select me.... , I will be bold..</div>
</body>
</html>
2、查看选择的内容
<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='#' onmouseup='javascript:showSelectContent(0);'>
select me. show selecting text
<br />
<a href='#' onmouseup='javascript:showSelectContent(1);'>
select me. show selecting htmlText
</body>
</html>
3、清除选中的内容
<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' onclick='javascript:clearSelectionContent();'>
delete selected contents
</buton>
</form>
</body>
</html>
4、通过脚本选择内容
<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' onclick='javascript:selectionContentByScript();' value='select the text box value' />
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android深入浅出系列之实例应用—弹出消息Toast对象的使用自定义方式（二）
- 使用Delphi调用WebServices接口的简单应用实例
- Flex+BlazeDS简单应用实例
- Django：popup弹出框简单应用实例
- js 获取站点应用名的简单实例
- 【转】解压缩版tomcat配置及使用(环境变量设置及测试,一个简单的web应用实例)
- Ajax在MVC中的应用——一个简单的.NET MVC 实例(续)
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之一
- jquery.validate中文API和应用实例（一）简单验证--绝对可用
- wxPython定时器wx.Timer简单应用实例
- HandlerThread实现真正的异步的简单实例，用到了Bundle对象
- jquery demo - jquery表格插件flexigrid的java简单应用实例
- activemq系列（2）-简单应用实例
- jQuery.ajax的简单应用实例 附实例下载
- prototype中的ajax对象应用实例
- jQuery.ajax的简单应用实例
- Spring系列之简单的应用实例
- js 声明数组和向数组中添加对象变量的简单实例
- 章鱼哥出品_VB.NET 线程委托应用实例 一个简单的例子让你轻松掌握委托的用法
- 使用nRF51822/nRF51422创建一个简单的BLE应用 ---入门实例手册(中文)之五