开启Html编辑模式的contentEditable属性
摘自网络:
http://www.2cto.com/kf/201303/194842.html
Html中的contentEditable的属性可以打开某些元素的可编辑状态.也许你没用过contentEditable属性.甚至从未听说过.contentEditable的作用相当神奇.可以让div或整个网页,以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea 使用contentEditable属性后,可以在div,table,p,span,body,等等很多元素中输入内容.
如果想要整个网页可编辑,请在body标签内设置contentEditable
contentEditable已在html5标准中得到有效的支持。
在IE8下设置表格可写不支持,其他元素没有问题。在FireFox运行一切正常。谷歌浏览器运行一切正常
使用方法
html中 <p contentEditable=“true”>;
js 中 document.all("txt").contentEditable =true;
应用
前段UI的美化,表单元素通过css样式不一定能达成设计师的要求,通过开启 div p span等元素的contentEditable,来实现表单元素的功能(需要js搭配)。
举例:
用于在textarea中除ie外不能插入图片。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script>
function img(){
var location1 = prompt("请输入图片的地址:","http://");
if(location1){
selImg(location1);
}
}
function selImg(s){
if(!s){return false;}
var h=s.substr(s.lastIndexOf(".")+1,3);
if(h=="gif"||h=="jpg" || h=="GIF" || h=="JPG"){
Edit=document.getElementById("idEdit")
Edit.innerHTML+='<img src='+s+'>'
}
else{
}
}
</script>
<div NAME=EditCtrl id=idEdit contentEditable=true style="width:100%;height:200px;border:1px solid #666666"> <b>hubro</b>
</div>
<input type="button" name="Submit" value="插入图片" onclick="img()">
编辑本段HTML5中的解释与规定
contenteditable是一个枚举类型的属性,可供选择的值有 空字符串、 true、false 或 inherit(默认)。
当为空字符串时,效果和true一致。
当一个元素的contenteditable状态为ture(contenteditable属性为空字符串,或为true,或为inherit且其父元素状态为true)时,意味着该元素是可编辑的。
否则,该元素不可编辑。[1]
注意:HTML5与HTML4的不同,对于contentEditable HTML5是趋于xhtml,使用的是全小写contenteditable,而HTML4 使用的是contentEditable
分享到:
相关推荐
标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中,使用`contenteditable`属性将一个`<div>`元素设置为可编辑区域,允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...
// 开启编辑模式 }); }); ``` 2. **内容编辑**:通过`contentEditable`属性,我们可以使HTML元素变为可编辑状态。在上述示例中,当用户点击单元格时,该单元格的`contentEditable`属性被设置为`true`,允许用户...
2. **contentEditable属性**:此属性使元素的内容变得可编辑。如果`contenteditable`属性设置为`true`,用户可以在浏览器中直接编辑元素内的内容;若设置为`false`,则元素变为不可编辑;如果设置为`inherit`,则会...
1. **Contenteditable属性**:理解HTML元素上的contenteditable属性如何工作,如何开启和关闭编辑模式。 2. **DOM操作**:使用JavaScript操作DOM,例如获取或设置contenteditable元素的内容,插入或删除文本。 3. **...
HTML5全局属性中,`contenteditable`允许用户直接在浏览器中编辑元素内容,`designMode`则可以开启整个页面的编辑模式。`hidden`属性可以隐藏元素,`spellcheck`控制输入字段的拼写检查,`tabindex`定义元素的键盘...
在JavaScript中,当用户双击表格的某个单元格时,我们可以触发编辑模式。这可以通过检查`event`对象的`type`属性来实现,如果`type`为`dblclick`,则表示用户进行了双击操作。接下来,我们将该单元格的`...
`contentEditable`属性是HTML元素的一个属性,用于控制该元素及其子元素是否可以被用户编辑。当设置为`true`时,用户可以直接在页面上编辑文本;设置为`false`时,则关闭编辑功能。 - **应用场景**:这种功能常用于...
1. HTML5的`contentEditable`属性:用于创建可编辑区域,允许用户在浏览器中直接编辑内容。 2. JavaScript DOM操作:通过JavaScript访问和修改HTML元素,包括设置`contentEditable`属性和`designMode`。 3. JSP基础...
这段代码将`contentEditable`属性重新设置为`false`,从而关闭可编辑模式,恢复网页到正常状态。 #### 三、应用场景 这种技术在多种场景下都非常有用,例如: - **前端开发测试**:允许开发者快速测试布局更改和...
1. 使用JavaScript的contentEditable属性 文档中提到了JavaScript代码`document.body.contentEditable='true';`,这表示页面的body部分将变为可编辑。`contentEditable`是HTML5中引入的一个属性,允许用户编辑页面上...
- **`designMode`属性:** `document.designMode`属性同样可以开启文档的编辑模式。当其值被设为`on`时,整个文档将变得可编辑。 #### 实际操作步骤: 1. 打开任意一个支持JavaScript执行的浏览器(如Chrome或Fire...
在IE5.5及之后的版本中,引入了“编辑模式”(designMode)这一概念,这使得在浏览器内部可以开启一个区域进行编辑。而在Firefox中,虽然没有直接的designMode属性,但通过设置`contentEditable`属性为`true`,也能...
设计模式是一个很小的扩展程序,它使Chrome进入编辑模式,使您可以像在HTML编辑器中一样编辑整个页面。 此扩展非常适合用于快速测试概念,例如,当标题达到特定文本长度时页面布局是否中断,或者图像或按钮在页面的...
这段代码的作用是将当前页面设置为可编辑模式,使得用户可以直接修改网页上的文本内容。具体步骤如下: 1. 打开需要编辑的网页。 2. 将上述JavaScript代码复制到IE浏览器的地址栏中,并按回车键执行。 3. 此时页面...
- `contenteditable`属性使元素内容可编辑。 - `data-*`自定义属性存储额外数据。 这个CSS3参考手册包含了以上所有内容的详细解释和实例,对于前端开发者来说,是一份非常实用的学习资源。结合HTML5、JavaScript...
在这个扩展中,JavaScript代码被用来检测用户何时需要开启或关闭`contentEditable`功能,并相应地修改目标元素的属性。这通常涉及到DOM(文档对象模型)操作,包括查找特定的HTML元素,以及改变它们的属性值。 扩展...
love.php生成的页面以此文件为模版程序运行原理给页面文字添加span标签,设置id="text-xx"唯一属性,使用contenteditable="true",开启该元素的编辑模式,用jQuery属性.click()判断点击,用.text()返回此元素的文本...
HTML5还引入了新的全局属性,如contentEditable允许元素内容可编辑,designMode用于开启整个文档的编辑模式,hidden用于隐藏元素,spellcheck用于启用或禁用拼写检查,tabindex则控制元素的焦点顺序。此外,文件类型...
给页面文字添加span标签,设置id="text-xx"唯一属性,使用contenteditable="true",开启该元素的编辑模式,用jQuery属性.click()判断点击,用.text()返回此元素的文本内容,并用正则进行判断内容是否合法,然后通过...