JS单击/双击编辑功能

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/><script src="/static/js/jquery-1.12.4.min.js"></script><script src="/static/js/bootstrap.min.js"></script><title>Title</title>
</head>
<body><span ondblclick="doubleClickChange(this)">双击修改</span><span></span>
</body>
</html>

JS

// 双击可编辑功能
function doubleClickChange(element) {// 获取原值 同时去除空格回车let old_val = element.innerHTML.trim().replace(/\s/g,"");// 创建新的input元素 此处也可以是textarealet new_val = document.createElement('input');// 为新增元素添加类型new_val.type = 'text';new_val.style = 'width:120px';// 为新增元素添加value值new_val.value = old_val;// 为新增元素添加光标离开事件new_val.onblur = function() {// 当触发时判断新增元素值是否为空，为空则不修改，并返回原有值this.value = this.value.trim().replace(/\s/g,"");// 相等 说明没改if (this.value === old_val) {element.innerHTML = old_val;// 当触发时设置父节点的双击事件为ShowElementelement.setAttribute("ondblclick", "ShowElement(this);");}// 不等 说明改了else {element.innerHTML = this.value;// 当触发时设置父节点的双击事件为ShowElementelement.setAttribute("ondblclick", "ShowElement(this);");// 保存到数据库xxfunction();}}// 设置该标签的子节点为空element.innerHTML = '';// 添加该标签的子节点，input对象element.appendChild(new_val);// 设置获得光标new_val.focus();//设置父节点的双击事件为空new_val.parentNode.setAttribute("ondblclick", "");
}

单击修改将行间事件ondblclick替换成onclick即可。

JS单击/双击编辑功能相关推荐

html双击变成可编辑状态,JS实现双击编辑可修改状态的方法
本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表 ...
STM32独立按键实现单击双击长按功能
目录前言一.按键功能定义二.使用步骤 1.按键初始化 2.按键扫描函数(重点) 总结前言在使用STM32或其他单片机开发项目时,经常需要用到独立按键进行控制. 通常一个独立按键需要使用一个I ...
多功能按键设计——利用一个I/O口，接一个按键，实现3功能操作：单击 + 双击 + 长按
看了一个晚上,结合了马潮老师的书,才搞懂这个程序,确实经典!原文: 题目:多功能按键设计.利用一个I/O口,接一个按键,实现3功能操作:单击 + 双击 + 长按. (amobbs.com 阿莫电子论坛 ...
js单击、双击、连续多次点击
文章目录单击双击单击双击同时存在连续多次点击单击原生javascript为我们提供了单击和双击(click 和 dblclick)两种点击事件的监听 var oBtn = document ...
JS中解决单击双击事件的冲突
当一个元素上即绑定了单击事件又绑定了双击事件,双击元素时会先触发单击事件,没有达到我们理想的效果从而影响了用户体验. 解决方法: // 解决同一个元素使用单击双击事件的冲突 // 解决思路:单击事件后 ...
flex中dataGrid的编辑功能
在flex的dataGrid中,很多情况下列是需要嵌入其他的控制的,比如:checkbox,combox等,此时需要利用dataGrid的如下功能: 1.datagrid编辑功能简介当我们点 ...
Flex控件_datagrid_编辑功能
1.datagrid编辑功能简介当我们点击datagrid中的一个单元格进行编辑时,可结合使用一些组件,RadioButtonGroup.checkbox.ComboBox等 dat ...
flex中dataGrid的编辑功能精华
from:http://blog.csdn.net/wuyan520/article/details/5469794 也是转载,源头未知. 在flex的dataGrid中,很多情况下列是需要嵌入其他的 ...
基于svg.js实现可编辑的图像（1）
一.关于svg.js 首先是svg.js的git地址https://github.com/svgdotjs/svg.js svg.js主要用于在页面绘制svg图像,关于svg图像可以参见w3schoo ...

JS单击/双击编辑功能

JS单击/双击编辑功能

JS单击/双击编辑功能相关推荐

最新文章

热门文章