首页 > 建站教程 > JS、jQ、TS >  document.selection.createRange方法:获取用户选择文本正文

document.selection.createRange方法:获取用户选择文本

document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回 ControlRange 对象。
配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。

实例一:
<textarea cols='50' rows='15'>免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏。</textarea>
<input type=button value='选择字后点击我看看' onclick='alert(document.selection.createRange().text)'>
实例二:
<textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字,当你选种其中几个字后点击一个按钮或者链接会弹出一个对话框,对话框的信息就是你选中的文字 哪位老大能解决的呀?请多多帮忙!!!谢谢 </textarea>
<input type="button" value="showSelection" onclick="alert(document.selection.createRange().text)">
<input type="button" value="showclear" onclick="alert(document.selection.clear().text)">
<input type="button" value="showtype" onclick="alert(document.selection.type)">
<textarea name="textfield" cols="50" rows="6" onselect="alert(document.selection.createRange().text)">免费网页模板,免费网页css模板,免费网页psd模板,免费源码下载,免费网页特效,免费js特效,免费jquery特效,jquery幻灯片代码,网站特效,免费建站教程,免费网站素材,酷站欣赏。</textarea>
实例三:选中Input中的文本
<input type='text' id='test' name='test'>
<script>
function test2(){
 var t=document.getElementById("test");
 var o=t.createTextRange();
 alert(o.text);
 o.moveStart("character",2);
 alert(o.text);
 o.select();
}
</script>
<input type=button onclick='test2()' value='test' name='test3'>对textarea中的内容,进行选中后,加效果
<script>
 function bold(){
 Qr=document.selection.createRange().text;
 if(!Qr || document.selection.createRange().parentElement().name!='description'){
 txt=prompt('Text to be made BOLD.','');
 if(txt!=null && txt!='') document.form1.description.value+=''+txt+'';
 }else{
 document.selection.createRange().text=''+document.selection.createRange().text+'';
 document.selection.empty();
 }
 }
</script>
<input type="button" value="加粗" onclick="bold();" />
<textarea name="description" style="width: 436px; height: 296px">选中我,点击加粗</textarea>
实例四:javascript捕获到选中的网页中的纯文本内容


提示:您可以先修改部分代码再运行