H5的新属性contenteditable
来源:互联网 发布:php 在线考试 编辑:程序博客网 时间:2024/05/22 00:49
之前做项目的时候,设计问题的题题目和选项用的都是div,然后给div设置contenteditable的属性值,这样的做的原因是容易操作,也不用考虑太多的兼容性问题,但是也衍生出了其他的问题
contenteditable的介绍
* contenteditable 属性指定元素内容是否可编辑。属性值为true则可编辑,false则不能编辑
<p contenteditable="true">这是一个可编辑段落。</p>
(http://img.blog.csdn.net/20171013095945461?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15X2hhcHBpbmVzcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)* 当元素中没有设置 contenteditable 属性时,元素将从父元素继承。
<div contenteditable="true"> <p>这是一个段落。是可编辑的。尝试修改文本。</p> <span>dewde</span> </div>
![运行效果](http://img.blog.csdn.net/20171013094142363?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW15X2hhcHBpbmVzcw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
contenteditable 的输入验证
设置此属性的div(后面直接用contenteditable代替),和表单中的输入框还是有些区别的: * 失去焦点的事件 blur input元素失去焦点,如果在失去焦点的事件中没有通过验证的话,用focus()就可以将焦点放在输入内容的最后面,如果没有清空输入内容的情况下,而contenteditable在失去焦点事件触发,进行输入内容的验证的时候,如果没有清空输入的内容,则利用focus()获取焦点的时候,光标会在输入内容的最前面,很不方便。为了将光标放在输入内容的最后面,在网上查了一些方法,觉得最合适的就是这个:
function setFocus(dom) { dom.focus(); var range = document.createRange(); range.selectNodeContents(dom); range.collapse(false); var sel = window.getSelection(); //判断光标位置,如不需要可删除 if(sel.anchorOffset!=0){ return; }; sel.removeAllRanges(); sel.addRange(range); }
dom是DOM对象,如果是用jquery对象,需要先将其转换为DOM对象
jquery对象转换DOM对象的方法
$demo = $("#demo"); demo=$demo[0];
其它事件现在还没有进行试验,以后进行补充
阅读全文
0 0
- H5的新属性contenteditable
- H5 contenteditable 属性学习
- 实用的属性:contentEditable
- android H5+app混合应用之 - contenteditable属性
- contentEditable属性
- contenteditable属性
- H5新表单属性
- H5 新属性
- h5新属性postmessage
- designMode和contentEditable的属性的介绍
- 开启Html编辑模式的contentEditable属性
- 浅谈h5的新属性(data-*属性)
- html contentEditable属性
- HTML5之contenteditable属性
- HTML5 contenteditable 属性
- div添加contenteditable属性
- 16. Element contentEditable 属性
- HTML5中的contentEditable属性
- Java中创建对象的5种方式
- Jarvisoj 逆向总结
- python学习日记(一)
- springmvc返回json
- OKhttp
- H5的新属性contenteditable
- 实验二 线性表的几种主要存储结果
- airnbn规范示例
- 获取客户端ip地址工具类
- 在ie6,7,8中,样式编写中特有的写法,
- 昨晚的一些感触
- 人工智能可以解决现实世界哪些业务需求?
- asp.net mvc重写JsonResult返回消息
- OpenCV中C++函数imread读取图片的问题