双击div变成可编辑区的简单实现

双击时，实现用一个新建的input元素替换div，然后当input失去焦点时先把input的内容传给原来的div,并用该div重新替换input,代码如下

window.onload = function() {
// 加载的时候就被初始化，此处的this是指id为oldDiv的div
document.getElementById("divElement").ondblclick = function() {
toReplace(this)
}
}
// 此函数功能是新建一个input元素替换div
//当input元素失去焦点时又变回原来的div
toReplace = function(divElement) {
// 创建一个input元素
var inputElement = document.createElement("input");
// 把obj里面的元素以及文本内容赋值给新建的inputElement
inputElement.value = divElement.innerHTML;
// 用新建的inputElement代替原来的oldDivElement元素
divElement.parentNode.replaceChild(inputElement, divElement);
// 当inputElement失去焦点时触发下面函数，使得input变成div
inputElement.onblur = function() {
//把input的值交给原来的div
divElement.innerHTML = inputElement.value;
//用原来的div重新替换inputElement
inputElement.parentNode.replaceChild(divElement, inputElement);
}
}

<div id="divElement">双击文字实现可编辑状态</div>

注：当想控制某一个div实现该函数时可以实现双击事件ondblclick

比如<div id="someDiv" οndblclick="toReplace(this)">双击文字实现可编辑状态</div>

双击div变成可编辑区的简单实现相关推荐

【selection】学习光标API并实现编辑区插入表情图片的功能
目录场景介绍 selection介绍 selection API range 介绍 range API 实现编辑区插入表情图片参考资料场景介绍在写web版聊天器时,遇到一个需求: 聊天时用户可 ...
ajax点击更改div,jquery ajax双击div可直接修改div中的内容
jquery ajax双击div可直接修改div中的内容发布于 2017-04-03 17:26:16 | 127 次阅读 | 评论: 0 | 来源: 网友投递 jQuery javascript框 ...
SpringToolSuite4更改编辑区字体大小
SpringToolSuite4使用记录 1.更改编辑区字体大小菜单栏Windows–preferences 按照路径General–Appearance–Color and Fonts–Basic ...
设置eclipse中的编辑区的背景颜色、注释文字的颜色、修改注释内作者名和时间
1.编辑区的背景颜色修改按以下步骤: window-->preferences-->general-->Editors-->Text Editors 然后在appearan ...
java文本框双击可编辑_JS实现双击内容变为可编辑状态
在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置 ...
idea编辑区左侧行号背景颜色修改
idea编辑区左侧行号背景颜色修改曾几何时,瞎改了一下这个区域的颜色: 后面隔了一段时间,忘记怎么改回了.今天找了很久终于找到修改的地方,记录一下: file->>setting-> ...
TIA博途软件中程序编辑区标题上的收藏快捷指令取消了，如何恢复显示?
TIA博途软件中程序编辑区标题上的收藏快捷指令取消了,如何恢复显示? 对于刚接触博途软件的小伙伴来说,上手还是需要一些时间的,如果在使用时,不小心把程序编辑区上方收藏的快捷指令取消了,如果进行显示呢? ...
Pycharm 让编辑区/代码区背景色为白色或与主题色不同
将主题色调整为深色设置路径为: File - Settings - Appearance&Behavior - Appearance - Theme 如下图: 将编辑区/代码区的背景色调整为 ...
html语言编辑方法,Html双击使文字可编辑的方法
JS代码: function update(id,html){ //编辑后焦点离开文本框时执行的方法 alert("id:"+id+":新内容:"+html) ...
WPS文字编辑区鼠标不能显示
WPS文字编辑区鼠标不能显示一种解决方案加表格框就是说在WPS里插入一个"表格", 此时,你在表格里输入文字啥的就可以显示鼠标啦!!!

双击div变成可编辑区的简单实现

双击div变成可编辑区的简单实现相关推荐

最新文章

热门文章