1.2D-Position 允许通过拖曳移动绝对定位的对象
命令document.execCommand("2D-Position",false,true)能打开文档的2D定位,当容器的contentEditable标记为true时,可以拖动容器内的控件、改变控件大小、编辑控件文本内容。第3个参数设置为true时可以拖动元素,否则不能。
要注意:2D定位只对样式设置为Position:absolute的元素有效
示例:
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 设置或获取当前选中区的背景颜色
示例:
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状态
示例:
function setBold()
{
var rng = document.selection.createRange();
rng.execCommand( ' Bold ' );
}
</ script >
自董卓造逆以来,天下豪杰并起。曹操势不及袁绍,而竟能克绍者,非惟天时,抑亦人谋也 < br >
< input type ="button" value ="选中部分文本后点击" onClick ="setBold()" >
4.Copy 将当前选中区复制到剪贴板
示例:
function copyText()
{
var rng = document.selection.createRange();
rng.execCommand( ' Copy ' );
alert( " 当前拷贝的文本是: " + rng.text);
}
</ script >
今操已拥百万之众,挟天子以令诸侯,此诚不可与争锋。孙权据有江东,已历三世,国险而民附,此可用为援而不可图也 < br >
< input type ="button" value ="拷贝" onClick ="copyText()" >
5.CreateLink 在当前选中区上插入超级链接,并显示一个对话框让用户输入URL
示例:
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()函数,并不能改变原有值。它们是不同的副本
}
}
}
荆州北据汉、沔,利尽南海,东连吴会,西通巴、蜀,此用武之地,非其主不能守;是殆天所以资将军,将军岂有意乎?益州险塞,沃野千里,天府之国,高祖因之以成帝业;今刘璋暗弱,民殷国富,而不知存恤,智能之士,思得明君。
< input type ="button" value ="创建链接" onClick ="setLink();" >
6.Cut 在当前选中区上执行"剪切"
示例:
function cutText()
{
var rng = document.selection.createRange();
rng.execCommand( ' Cut ' );
}
</ script >
将军既帝室之胄,信义著于四海,总揽英雄,思贤如渴,若跨有荆、益,保其岩阻,西和诸戎,南抚彝、越,外结孙权
,内修政理;待天下有变,则命一上将将荆州之兵以向宛、洛,将军身率益州之众以出秦川,百姓有不箪食壶浆以迎将
军者乎?
< input type ="button" value ="剪切" onClick ="cutText()" >< br >
< input >
7.Delete 删除当前选中区
示例:
function delText()
{
var rng = document.selection.createRange();
rng.execCommand( ' Delete ' );
}
</ script >
诚如是,则大业可成,汉室可兴矣。此亮所以为将军谋者也。惟将军图之
< input type ="button" onClick ="delText()" value ="删除所选文本" >
8.FontName 设置或获取当前选中区的字体
示例:
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号字来处理
示例:
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进值
示例:
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 设置当前块格式化标签
示例:
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 增加选中文本的缩进
示例:
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">标签
示例:
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(文本框控件)
示例:
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 >