禁用webkit textarea可调整大小和文本框焦点时边框 , contenteditable 和designMode
2010年06月20日
标明原创的文章转载请注明出处,谢谢! 人个网站:http://www.uedsky.com 更多文章:http://www.cnblogs.com/sohighthesky/
大家都知道,Webkit系列浏览器(Safari、Chrome)的textarea的默认效果和其它浏览器不一样,比如,textarea可拖动调整大小,聚焦(onfocus)时边框变成黄色。这些效果的确很酷,但我们有时候不需要这些效果,那怎么办呢?其实用CSS轻松取消这些效果。
1. 取消拖动调整大小 textarea { resize: none; } 2. 聚焦时边框颜色不变 textarea:focus { outline: none; } 3. contentEditable和designMode的区别
实现可视化编辑,可以使用contentEditable和designMode两种方法。contentEditable刚开始在IE上实现,后来各大浏览器陆续支持contentEditable,HTML5标准也包含contentEditable。designMode只能把document整体改成可编辑状态,但contentEditable可以把任何HTML元素改成可编辑状态,应用范围比designMode广,用contentEditable是将来的趋势。
但在IE上designMode和contentEditable不完全一样,有不少细微的差距,我们开发可视化编辑器时需要格外注意。
1. 在IE上使用designMode,调用document.domain将报没有权限的错误,用contentEditable没有此问题。
2. 在IE上使用designMode,右键菜单没有复制、粘贴功能,出来的是普通网页的右键菜单。
3. 在IE6和IE7上使用contentEditable,在某些情况下焦点自动移动到编辑区域,类似focus()的效果。这个问题非常要命,因为很多时候我们不希望页面初始化时焦点跳到编辑区域里。
发表评论
-
JavaScript方法和技巧大全[集合]
2012-01-20 10:55 585JavaScript方法和技巧大全 ... -
JS方法与技巧
2012-01-20 10:55 553JS方法与技巧 2010年08月 ... -
FCKEditor 2.6.4 Asp.net上传文件没有权限解决
2012-01-20 10:55 549FCKEditor 2.6.4 Asp.net上传文件没有权限 ... -
an error occurred while attempting to contact the server_cheney
2012-01-19 15:52 1347an error occurred while attempt ... -
电脑开机出现disk error处理办法(转)
2012-01-19 15:52 1581电脑开机出现disk error处理办法(转) 2011年1 ... -
RS 报表里面出现 错误号 #Error
2012-01-19 15:52 1010RS 报表里面出现 错误号 #Error 2011年11月2 ... -
【引用】mysql ERROR 1040 (08004): Too many connections
2012-01-19 15:52 1150【引用】mysql ERROR 1040 (08004): T ... -
error:link2005详解
2012-01-19 15:52 723error:link2005详解 2011年11 ... -
单车的领悟
2012-01-17 05:35 682单车的领悟 2011年11月25日 1.别庆幸为你亮绿灯 ... -
奇瑞量子既出 合资品牌当重新定义
2012-01-17 05:35 559奇瑞量子既出 合资品牌 ... -
紫微生年忌看你运气走势!
2012-01-17 05:35 1722紫微生年忌看你运气走 ... -
看不起
2012-01-17 05:35 692看不起 2011年11月26日 ... -
关于记忆与时空产生辩证关系《刺青》有感
2012-01-17 05:35 576关于记忆与时空产生辩证关系《刺青》有感 2011年11月26 ... -
季谦先生谈经典视听教育(音乐读经、胎教,0-3岁等)
2012-01-16 04:30 622季谦先生谈经典视听教育(音乐读经、胎教,0-3岁等) 201 ... -
浅谈辩论赛
2012-01-16 04:30 888浅谈辩论赛 2011年04月06 ... -
作文评语大全
2012-01-16 04:30 582作文评语大全 2009年11 ...
相关推荐
JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容、兼容IE8,很好的例子!
flex 制作的文本框组件,能够根据加载的字符串长度,自动调整文本框大小。将源码导入Flash builder即可使用。
文本框根据输入内容调整大小
Vue自定义组件实现文本框根据文本内容自适应高度的效果,解决若输入文本量或显示文本量超过指定行数后,会出现垂直滚动条,但在IE环境下,该滚动条是隐藏的问题。
jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
textarea焦点
html页面实现给textarea等等的文本框内添加可动态输入文字的多行下划线,类似于打印出来的学生考试试卷答题的那种多行横线效果一样,可在页面文本框内横线输入框上随意输入文字,调用浏览器打印文本时也可完整正常的...
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ ... var count_total = $this...jQuery textarea文本框输入文字字数限制提示代码,设置固定输入字符,实时计算显示已经输入多少字符。
Textarea Autosize:根据内容的大小自动调整Textarea
HTML中的标签textarea的属性及用法
去掉chrome(谷歌)浏览器默认的input、textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色...
textarea文本框删除当前行内容的功能
让textarea自动调整大小的js代码,需要的朋友可以参考下。
jquery新浪发布微博textarea文本框限制文字字数表单 jquery新浪发布微博textarea文本框限制文字字数表单
效果图: 具体实现: 1、textarea标签内容 代码如下: <span xss=removed><tr> ”right” valign=”top”>备注:</td> <td><textarea name=”” id=”remark” cols=”” rows=”” class=”textarea220″ onfocus...
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
Textarea自动调整大小自动将textarea调整为其内容的大小。安装$ npm install @github/textarea-autosize用法必须在<textarea>上显式激活自动调整大小的行为。 import autosize from '@github/textarea-...
textarea在文本之后获得焦点,适合ie,火狐,谷歌
在textarea光标处插入文本