详探TextRange对象--用execCommand()执行命令

1. 2D-Position 允许通过拖曳移动绝对定位的对象

命令document.execCommand("2D-Position",false,true)能打开文档的2D定位,当容器的contentEditable标记为true时,可以拖动容器内的控件、改变控件大小、编辑控件文本内容。第3个参数设置为true时可以拖动元素,否则不能。

要注意:2D定位只对样式设置为Position:absolute的元素有效。

<script>
document.execCommand("2D-Position",false,true);
</script>

<div contentEditable=true>
  <p style="background-color:silver;position:absolute">可移动段落</p>
  <input type="button" value="可移动按钮" style="position:absolute">
</div>

 

2.BackColor 设置或获取当前选中区的背景颜色

<script>
function bgcolor()
{
    var rng = document.selection.createRange();
    rng.execCommand('BackColor','false','silver');
}
</script>

亮少有逸群之才,英霸之器,身长八尺,容貌甚伟,时人异焉。<br>
<input type="button" value="选中部分文本后点击" onClick="bgcolor()">

 

3.Bold 切换当前选中区的粗体

这个方法执行后可以将指定文本设置为Bold,如果在已经设置为Bold上再次执行该命令,则可以取消Bold状态

<script>
function setBold()
{
    var rng = document.selection.createRange();
    rng.execCommand('Bold');
}
</script>

自董卓造逆以来,天下豪杰并起。曹操势不及袁绍,而竟能克绍者,非惟天时,抑亦人谋也<br>
<input type="button" value="选中部分文本后点击" onClick="setBold()">

 

4.Copy 将当前选中区复制到剪贴板 

<script>
function copyText()
{
    var rng = document.selection.createRange();
    rng.execCommand('Copy');
    alert("当前拷贝的文本是:"+rng.text);
}
</script>

今操已拥百万之众,挟天子以令诸侯,此诚不可与争锋。孙权据有江东,已历三世,国险而民附,此可用为援而不可图也<br> 
<input type="button" value="拷贝" onClick="copyText()">

 

5.CreateLink 在当前选中区上插入超级链接,并显示一个对话框让用户输入URL

<script>
function setLink()
{
    var rng = document.selection.createRange();
    if(rng.text!="")
    {
        rng.execCommand('CreateLink');
        if(confirm('在新窗口打开链接吗?'))
        {    
            rng.parentElement().outerHTML = rng.parentElement().outerHTML.replace("<A","<A target='_blank' ");
            //这里要注意一定要使用赋值的方式,否则直接调用replace()函数,并不能改变原有值。它们是不同的副本
        }
    }    
    
}
</script>

荆州北据汉、沔,利尽南海,东连吴会,西通巴、蜀,此用武之地,非其主不能守;是殆天所以资将军,将军岂有意乎?益州险塞,沃野千里,天府之国,高祖因之以成帝业;今刘璋暗弱,民殷国富,而不知存恤,智能之士,思得明君。                                          
<input type="button" value="创建链接" onClick="setLink();">

 

6.Cut 在当前选中区上执行"剪切"

<script>
function cutText()
{
    var rng = document.selection.createRange();
    rng.execCommand('Cut');
}
</script>

将军既帝室之胄,信义著于四海,总揽英雄,思贤如渴,若跨有荆、益,保其岩阻,西和诸戎,南抚彝、越,外结孙权
,内修政理;待天下有变,则命一上将将荆州之兵以向宛、洛,将军身率益州之众以出秦川,百姓有不箪食壶浆以迎将
军者乎?
<input type="button" value="剪切" onClick="cutText()"><br>
<input>

 

7.Delete 删除当前选中区

<script>
function delText()
{
    var rng = document.selection.createRange();
    rng.execCommand('Delete');
}
</script>

诚如是,则大业可成,汉室可兴矣。此亮所以为将军谋者也。惟将军图之
<input type="button" onClick="delText()" value="删除所选文本">

 

8.FontName 设置或获取当前选中区的字体

<script>
function getFontName()
{
    var rng = document.selection.createRange();
    rng.execCommand('FontName',true,'幼圆');
    var temp = rng.queryCommandValue('FontName');
    alert("你设置的字体是:"+temp);
}
</script>

言罢,命童子取出画一轴,挂于中堂,指谓玄德曰:“此西川五十四州之图也。将军欲成霸业,北让曹操占天时,南让孙权占地利,将军可占人和。
<input type="button" onClick="getFontName()" value="设置字体为幼圆">

 

9.FontSize 设置或获取当前选中区的字体大小

这个命令接受的参数是1-7号字,超过7的参数也将被转换成7号字来处理

<script>
function setFontSize()
{
    var rng = document.selection.createRange();
    rng.execCommand('FontSize',true,'11');
    var temp = rng.queryCommandValue('FontSize');
    alert("字体大小是:"+temp);
}
</script>

言罢,命童子取出画一轴,挂于中堂,指谓玄德曰:“此西川五十四州之图也。将军欲成霸业,北让曹操占天时,南让孙权占地利,将军可占人和。
<input type="button" onClick="setFontSize()" value="设置字体大小">

 

10.ForeColor 设置或获取选中区的前景(文本)颜色

其实也可以通过queryCommandValue()获得颜色值,不过格式是10进制数,需要的时候可以转换成16进值。

<script>
function setForeColor()
{
    var rng = document.selection.createRange();
    rng.execCommand('ForeColor',true,'blue');
    var temp = rng.queryCommandValue('ForeColor');
    alert("颜色值:"+temp);
}
</script>

先取荆州为家,后即取西川建基业,以成鼎足之势,然后可图中原也 
<input type="button" onClick="setForeColor()" value="设置前景色">

 

11.FormatBlock 设置当前块格式化标签

<script>
function formatBlock()
{
    var rng = document.selection.createRange();
    rng.execCommand('FormatBlock',false,'<h2>');
}
</script>

<p>段落一</p>
<p>段落二</p>
<input type="button" value="格式化为h2" onClick="formatBlock();">

 

12.Indent 增加选中文本的缩进

<script>
function increaseIndent()
{
    var rng = document.selection.createRange();
    rng.execCommand('Indent');
}
</script>

<p>自你走后心憔悴</p>
<p>白色油桐风中纷飞</p>
<input type="button" onClick="increaseIndent();" value="增加所选文本缩进">

 

13.InsertButton 插入按钮覆盖当前选中区

与此相同的还有一个命令InsertInputButton,也是插入一个按钮,不过InsertButton是<Button>标签,InsertInputButton是<input type="button">标签。

<script>
function insertButton()
{
    var rng = document.selection.createRange();
    rng.execCommand('InsertButton',false,'btn');
    //rng.execCommand('InsertInputButton',false,'btn');
    btn.value = "新插入的按钮";
}
</script>

权即见肃,与语甚悦之。众宾罢退,肃亦辞出,乃独引肃还,合榻对饮
<input type="button" value="插入按钮" onClick="insertButton()">

 

14.InsertInput系列

包括有InsertInputCheckbox(复选框控件)、InsertInputFileUpload(文件上载控件)、InsertInputHidden(隐藏控件)、InsertInputImage(图像控件)、InsertInputPassword(密码控件)、InsertInputRadio(单选按钮控件)、InsertInputReset(重置控件)、InsertInputSubmit(提交控件)、InsertInputText(文本框控件)。

<script language="javascript">
function insertInput(str)
{
    var rng = document.selection.createRange();
    switch(str)
    {
        case 'Checkbox':
        rng.execCommand('InsertInputCheckbox',false,'chkBox');
        chkBox.checked = true;
        break;

        case 'FileUpload':
        rng.execCommand('InsertInputFileUpLoad',false,'fileUp');
        break;    

        case 'Hidden':
        rng.execCommand('InsertInputHidden',false,'hidd');
        hidd.value = "这是一个隐藏值";
        alert(hidd.value);
        break;

        case 'Image':
        rng.execCommand('InsertInputImage',false,'img');
        img.src = "http://www.baidu.com/img/logo.gif";
        break;

        case 'Password':
        rng.execCommand('InsertInputPassword',false,'pwd');
        break;

        case 'Radio':
        rng.execCommand('InsertInputRadio',false,'rbtn');
        rbtn.checked = true;
        break;

        case 'Reset':
        rng.execCommand('InsertInputReset',false,'reset');
        break;

        case 'Submit':
        rng.execCommand('InsertInputSubmit',false,'refer');
        refer.value = '提交按钮';
        break;

        case 'Text':
        rng.execCommand('InsertInputText',false,'txt');
        txt.value = '一个文本框';
        break;
    }
}
</script>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<input type="button" value="插入复选框" onClick="insertInput('Checkbox')"><p>
<input type="button" value="插入文件上载控件" onClick="insertInput('FileUpload')"><p>
<input type="button" value="插入隐藏控件" onClick="insertInput('Hidden')"><p>
<input type="button" value="插入图像控件" onClick="insertInput('Image')"><p>
<input type="button" value="插入密码控件" onClick="insertInput('Password')"><p>
<input type="button" value="插入单选框" onClick="insertInput('Radio')"><p>
<input type="button" value="插入重置按钮" onClick="insertInput('Reset')"><p>
<input type="button" value="插入提交按钮" onClick="insertInput('Submit')"><p>
<input type="button" value="插入文本框" onClick="insertInput('Text')"><p>

 

posted @ 2006-10-16 15:44  CoderWayne  阅读(501)  评论(0编辑  收藏  举报