html5 contenteditable 可编辑属性
2024-05-10 22:47:26
今天在工作中遇到了这样的需求。如上gif显示。
于是就仔细的看下了 h5新增的这个可编辑属性 contenteditable
contenteditable 属性规定是否可编辑元素的内容。contenteditable 可以设置为true/false
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
ul li{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 10px;
margin: 0;
}
li div{
width: 85%;
border: 1px solid #f0f0f0;
}
#name.placeholder:after{
content: "请输入姓名";
color: #ddd;
}
#address.placeholder:after{
content: "请输入地址";
color: #ddd;
}
</style>
</head>
<body>
<ul>
<li><span>姓名:</span><div contenteditable="true" id="name" class="placeholder"></div></li>
<li><span>地址:</span><div contenteditable="true" id="address" class="placeholder"></div></li>
</ul>
<script type="text/javascript">
// 开始编辑时触发
document.getElementById('name').oninput = function(){
var text = this.innerHTML;
if(text.length != 0){
this.classList.remove('placehold');
}
}
document.getElementById('address').oninput = function(){
var text = this.innerHTML;
if(text.length != 0){
this.classList.remove('placehold');
}
}
</script>
</body>
</html>
上面是一个使用的例子；
主要想说明下，
（1）contenteditable 在编辑时如果手动的按了换行键，这里会添加一个div。这个不论定义被编辑属性的标签是什么，这里换行后都会添加一个div包起来。
（2）给编辑框添加一个placeholder, 当编辑的时候会出发oninput事件。
这里顺便把编辑属性和input type = text的编辑触发事件给总结下
这两个里面还是有区别的、我测试中发现，具有编辑属性的标签不会触发onchange事件
1.onfocus 当input 获取到焦点时触发
2.onblur 当input失去焦点时触发，注意：这个事件触发的前提是已经获取了焦点再失去焦点的时候会触发相应的js
3.onchange 当input失去焦点并且它的value值发生变化时触发
4.onkeydown 在 input中有键按住的时候执行一些代码
5.onkeyup 在input中有键抬起的时候触发的事件，在此事件触发之前一定触发了onkeydown事件
6.onclick 点击输入框的时候就会触发，一般和获取焦点一起触发
7.onselect 当input里的内容文本被选中后执行一段，只要选择了就会触发，不是非得全部选中。这个在电脑上测试没有发现事件被触发。
8.oninput 当input的value值发生变化时就会触发，不用等到失去焦点（与onchange的区别）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
}
ul li {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
list-style: none;
padding: 10px;
margin: 0;
}
#name {
display: inline-block;
width: 85%;
border: 1px solid #f0f0f0;
}
#name.placehold:after {
content: "请输入姓名";
color: #ddd;
}
#address.placehold:after {
content: "请输入地址";
color: #ddd;
}
</style>
</head>
<body>
<ul>
<li><span>姓名:</span><span contenteditable="true" id="name" class="placehold"></span></li>
<li><span>地址:</span>
<div contenteditable="true" id="address" class="placehold"></div>
</li>
</ul>
<input type="text" id="inputclick" placeholder="我是一个input" />
<script type="text/javascript">
// 开始编辑时触发
document.getElementById('name').oninput = function() {
console.log('oninput');
var text = this.innerHTML;
if (text.length != 0) {
this.classList.remove('placehold');
}
}
// 这个方法没有触发 非input 其他的具有编辑属性的标签不能触发onchange
// document.getElementById('name').onchange = function() {
// console.log('onchange');
// }
// input
// inputclick 获取焦点时触发了onfocus/onclick
// 当name 失去焦点触发了onblur,onchange
// 当name 通过键盘输入时，一次触发 onkeydown,oninput,onkeyup
// oninput 事件，获取焦点后开始编辑就可以时时获取到输入的内容
//
document.getElementById('inputclick').onfocus = function() {
console.log('inputclick-onfocus');
}
document.getElementById('inputclick').onblur = function() {
console.log('inputclick-onblur');
}
document.getElementById('inputclick').onkeydown = function() {
console.log('inputclick-onkeydown');
}
document.getElementById('inputclick').onkeyup = function() {
console.log('inputclick-onkeyup');
}
document.getElementById('inputclick').onclick = function() {
console.log('inputclick-onclick');
}
document.getElementById('inputclick').onselect = function() {
console.log('inputclick-onselect');
}
document.getElementById('inputclick').oninput = function() {
console.log('inputclick-oninput');
}
document.getElementById('inputclick').onchange = function() {
console.log('inputclick-onchange');
}
document.getElementById('address').oninput = function() {
var text = this.innerHTML;
if (text.length != 0) {
this.classList.remove('placehold');
}
}
// 当name 获取焦点时触发了onfocus/onclick
// 当name 失去焦点触发了onblur
// 当name 通过键盘输入时，一次触发 onkeydown,oninput,onkeyup
// oninput 事件，获取焦点后开始编辑就可以时时获取到输入的内容
// 注意 onchange 没有被触发
document.getElementById('name').onfocus = function() {
console.log('onfocus');
}
document.getElementById('name').onblur = function() {
console.log('onblur');
}
document.getElementById('name').onkeydown = function() {
console.log('onkeydown');
}
document.getElementById('name').onkeyup = function() {
console.log('onkeyup');
}
document.getElementById('name').onclick = function() {
console.log('onclick');
}
document.getElementById('name').onselect = function() {
console.log('onselect');
}
document.getElementById('name').oninput = function() {
console.log('oninput');
}
document.getElementById('name').onchange = function() {
console.log('name-onchange');
}
</script>
</body>
</html>
引用了一篇文章
html5将oninput事件标准化了，该事件用来检测用户的输入状态。当然，通过使用onkeydown或者onkeyup作为代替也是可以的。这些事件设计本意也并非如此，参见详情。
所有的现代浏览器支持oninput，其中包括IE9。对于那些老式浏览器，在不支持该事件时用keydown作为优雅降级。
不幸的是，检测浏览器对该oninput事件的支持性并不容易。假定浏览器支持oninput，那么以下这段js代码的返回值为true，否则为false。
'oninput' in document.createElement('input')
这段代码在大多数浏览器中正常运行，除了Firefox（见bug #414853）（我在这里测试是可以的 54.0.1 (64 位)），
故仍旧需要为oninput作浏览器特性检测。除此以外就没必要为其他浏览器作特性检测了，只需为input和keydown绑定事件，并在oninput事件触发之后删除onkeydown即可。示例如下：
someElement.oninput = function() { el.onkeydown = null; // Your code goes here};someElement.onkeydown = function() { // Your code goes here}
keydown事件仅会被触发一次（在oninput事件触发前），之后再触发oninput。虽然并不完美，但总比写上一大堆oninput特性检测代码要好些吧。
IE 事件兼容 onpropertychange
html5 contenteditable 可编辑属性相关推荐
- html中dom的可编辑属性（contenteditable）用法
1.contenteditable使用 contenteditable作为dom元素的可编辑属性,默认为false,当需要一个非input的标签需要编辑时只需设置该dom的contenteditabl ...
- 《 HTML5 》— HTML5页面元素及属性
HTML5页面元素及属性 1.无序列表-ul元素的使用 <!doctype html> <html> <head> <meta charset="u ...
- html5常见使用的属性,HTML5常见五种常规全局属性
HTML5中有很多的属性,新增了一个HTML中没有的属性:全局属性. 接下来一起看HTML5常见五种常规全局属性. contentEditable属性 contentEditable是由微软开发.被其 ...
- HTML5页面元素和属性大全，自行定位
结构元素(手机端网页) 这些标签在电脑客户端功能相当于<p> 标签 网页头部 标签名:header 网页导航 标签名:nav 网页底部 标签名:footer 网页侧栏 标签名:aside ...
- HTML5 - contenteditable 富文本编辑器
简介 上图是我自己没事用 contenteditable 写着玩的,一个有点像 VS Code 的脚本编辑器.主要是脚本要根据类型高亮,比如方法名黄色.关键字紫色. contenteditable 是 ...
- EditorGridPanel的网格样式以及编辑属性设置
1.添加(设置)单元格样式 function SetMyColumns(value, cell, record, rowIndex, columnIndex, store) {if((columnIn ...
- mapgis编辑属性结构编辑不了_MapGIS67操作手册(3-17)MapGIS67编辑线属性结构的方法...
下面我们给每条河流,添加对应的名称属性,如黄河.长江等. 1. 单击"线编辑"菜单下"参数编辑"下的"修改线属性"命令,如下图所示: 2. ...
- html5 lang作用,HTML5中的lang属性，zh
先提供资源.如果我弄错了什么,请以这些文档为准: W3C文档.IANA已登记的子标签.BCP 47.RFC 5646. 二.格式简介 先上一张图片: 一个Language Tags,由①到⑦一共四个子 ...
- HTML5新增表单属性（HTML5）
HTML5新增表单属性(HTML5) <!DOCTYPE html> <html lang="en"><head><meta charse ...
最新文章
- java list转成map对象_将List集合中的map对象转为List对象形式--封装类
- php get 传循环出来的参数_PHP性能优化小技巧
- CheckBox in ListView
- go语言编程小游戏--贪吃蛇
- MyBatis参数名称解析器-ParamNameResolver解析
- _Linux进程信号详解
- R统计绘图 - 热图美化
- 一位19年的Mac用户：“我真的很讨厌库克”
- php--学习封装类 （一）(操作mysql数据库的数据访问)
- Java工作流引擎有哪些？
- JAVA将多个Pdf合并成一个Pdf
- mysql字段动态扩展_数据库动态扩展字段
- Android 最常用的设计模式八 安卓源码分析—工厂方法模式factory
- 上市公司财务报表分析
- 中国医药中间体行业盈利状况与竞争趋势预测报告（新版）2022-2027年
- linux shell自动登录,Shell自动登录并执行命令
- UML小结,UML图,UML例子
- 导航英语专业词汇——不停更新
- 《系统相关》Intel VT-x 处于禁用状态开启
- 关于计算机的英语名言,英语名人名言:计算机Computers/Technology