unselectable(ie) 属性在编辑器中的一个应用

最新推荐文章于 2022-07-29 11:08:11 发布

zhangw428

最新推荐文章于 2022-07-29 11:08:11 发布

阅读量6.4k

点赞数

文章标签： ie function html javascript border null

本文链接：https://blog.csdn.net/zhangw428/article/details/3952576

版权

做在线编辑器时，遇到了一个ie丢失焦点的问题。

现象是：“为文本编辑器做的一个颜色选择器，在firefox中一切正常。在ie中却出现了很怪的问题，选中文本后点击“改变文字颜色”按钮，选择颜色后，选中文字颜色不变，光标跳到了文档的开头……而且每次点“改变文字颜色”，光标都跳到最前面”。

这实质上就是ie不保存焦点造成的问题，一个比较取巧的解决方案就是利用ie的unselectabel属性，给点击按钮设置属性unselectable = "on",这样编辑器焦点就不会丢失，始终保持在选中文本中。

解决后的代码：

关键行数：39 121 178

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#td_code { padding:8px 3px; } #td_editor { width:595px; border: 1px solid #c5c5c5; line-height:130%; } #toolbar { margin:0; padding: 0; width: 100%; list-style: none; border-bottom: 1px solid #c5c5c5; background: url(../images/toolbarbg.gif) repeat-x; height: 31px; }</style> <body> <mce:script type="text/javascript"></mce:style><style type="text/css" mce_bogus="1">body { margin: 0; padding: 0px;}</style></head><body>' + content + '</body></html>') this.ed.document.close(); var thisObj = this ; a_addEvent(document , "onclick" , function() {thisObj.hide()}) ; a_addEvent(this.ed.document , "onclick" , function() {thisObj.hide()}) ; } , setColor : function(color) { this.set('forecolor' , color) ; document.getElementById('myColorPicker').style.display = 'none' } , editorHTML : '<div id="td_editor" style="margin:0 auto;width:645px">' + '<ul id="toolbar" οnclick="stopEvent(event , /'b/')" >' + '<li style="position: relative;" mce_style="position: relative;"><a href="javascript://" mce_href="javascript://" id="dlg_setColor" title="颜色" unselectable="on"><img border="0" width="169" height="35" alt="点击更换文字颜色" title="点击更换文字颜色" src="" /></a></li>' + '</ul>' + '<iframe id="ifm_editarea" src="about:blank" mce_src="about:blank" frameborder="0"></iframe>' + '</div>' + '</div>'+ '<div class="rBot"></div></div>', create : function(){ var div = document.createElement('div'); div.innerHTML = this.editorHTML; document.body.appendChild(div) div.style.position = 'absolute'; div.style.left = 0; div.style.top = 0; proEditor.onload(); } } // --></mce:script> <mce:script type="text/javascript"></mce:script> </body> </html>

zhangw428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
unselectable(ie) 属性在编辑器中的一个应用

做在线编辑器时，遇到了一个ie丢失焦点的问题。现象是：“为文本编辑器做的一个颜色选择器，在firefox中一切正常。在ie中却出现了很怪的问题，选中文本后点击“改变文字颜色”按钮，选择颜色后，选中文字颜色不变，光标跳到了文档的开头……而且每次点“改变文字颜色”，光标都跳到最前面”。这实质上就是ie不保存焦点造成的问题，一个比较取巧的解决方案就是利用ie的unselectabel
复制链接

扫一扫