`
maomaozgc
  • 浏览: 336246 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

实现div可编辑的常见方法

阅读更多
实现div可编辑的常见方法
功能:实现网页内容的即时编辑,增加页面的可用性、交互性。
方法1:直接通过textarea标签实现,请运行这个Demo。

思路:将textarea通过CSS样式设计成让用户感觉不像是textarea的样子,通过onblur、oumouseout等属性进行ajax保存用户数据。

方法二:通过document.createElement的方法向页面增加input来实现。请运行这个Demo。

思路:
1、当用户鼠标经过可编辑区域时,用背景色等方式提醒用户该区域可编辑。
2、当用户鼠标点击该区域时,也就是onclick事件时,先将原来的内容清掉,将临时创建出来一个输入框和一个输入按扭。
3、用户修改完后,点击“保存”按扭时通过ajax向数据库中写入新的数据。



分享到:
评论

相关推荐

    实现div可编辑的常见方法总结

    ### 实现div可编辑的常见方法总结 #### 功能概述 在现代Web开发中,实现网页内容的即时编辑是一项非常重要的功能,它不仅能够提升用户体验,还能够增强页面的交互性和实用性。通常,这种功能被广泛应用于CMS系统、...

    用javascript实现div可编辑的常见方法

    ### 用JavaScript实现DIV可编辑的常见方法 在现代Web开发中,使页面元素变得可编辑是一项非常实用的功能,它可以显著提升用户体验,并增加页面的互动性。本文将详细介绍两种常用的利用JavaScript实现DIV可编辑性的...

    DIV层拖动的实现,可改变大小.

    通过使用JavaScript和CSS,可以实现DIV层的拖动和改变大小的功能。本文将对DIV层拖动和改变大小的实现进行详细的介绍。 一、DIV层拖动的实现 DIV层拖动是指用户可以通过鼠标拖动DIV层的四个角来改变其大小。要实现...

    vue项目中在可编辑div光标位置插入内容的实现代码

    在Vue项目中,有时我们需要在可编辑的div元素中实现用户能够插入内容的功能。这个功能在文本编辑器或者富文本编辑场景中非常常见。本文将详细介绍如何在Vue中实现在可编辑div的光标位置插入内容,并提供相关代码示例...

    Ajax实现div拖拽

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新...这个功能在许多交互式的Web应用中都很常见,例如在线编辑器、日历应用、画板等。通过Ajax,我们可以将用户的操作实时同步到服务器,提供更流畅的用户体验。

    JQ实现DIV大小、位置拖动调整源码

    这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案,它使得开发者能够为网页上的<div>元素添加动态的拖放功能,提升用户体验。 jQuery(简称JQ)是一个轻量级的JavaScript库,它简化了HTML文档...

    在可编辑div中插入文字或图片解决思路与实现步骤

    虽然div是常用的可编辑区域实现方式,但在某些场景下可能需要更复杂的编辑功能。这时,可以使用`iframe`作为容器。在iframe中,你可以运行一个完整的HTML页面,这有助于避免复杂的跨域问题。不过,使用iframe时需要...

    拖动div到另一个div中

    在网页开发中,"拖放"(Drag and Drop)功能是一项常见的交互设计,它允许用户通过鼠标或其他输入设备将一个元素(例如一个div)从一个位置拖曳到另一个位置。这个过程涉及到HTML5中的拖放API,它可以为用户提供直观...

    用div实现的仿QQ聊天功能有表情

    这个文件可能包含了HTML结构、CSS样式以及JavaScript逻辑,展示了如何用div来构建一个可编辑的区域,并且可能实现了表情插入和其他功能。 总之,仿QQ聊天功能的实现是一个综合性的项目,涉及到HTML、CSS、...

    拖拽+拖拽改变div大小

    在网页开发中,"拖拽+拖拽改变div大小"是一种常见的交互设计,它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...

    基于ASP.NET实现的可编辑的下拉框控件程序例子

    ASP.NET作为一种流行的Web应用程序框架,提供了丰富的服务器控件,其中可编辑的下拉框(DropDownList)控件是一个常用且功能强大的组件。本文将深入探讨如何在ASP.NET中实现一个可编辑的下拉框控件,并通过具体的...

    可编辑选项卡TAB

    在IT行业中,尤其是在前端开发领域,可编辑选项卡(flex Tab 可编辑)是一种常见的用户界面元素,它允许用户在选项卡式布局中创建、编辑和管理内容。这种功能极大地提高了用户交互性和用户体验,尤其在处理大量数据...

    div布局软件-主要用于div对网页进行前期的布局

    Div布局,全称为“Division布局”,是HTML中一种常用的布局方法,常用于创建复杂且灵活的网页结构。本篇将详细介绍Div布局的概念、优势以及如何使用Div布局软件进行可视化设计。 **Div布局基础** Div元素在HTML中...

    js 鼠标拖动对象 可让任何div实现拖动效果.docx

    在JavaScript中,实现一个div元素的拖动效果是一项常见的任务,...11. 类似空间共性编辑模块 js实现div色块拖动录制 这些文章提供了更高级或不同的实现方式,可以帮助你更好地理解和掌握JavaScript中的div拖动技术。

    div层高度可拖动demo

    这种功能在各种需要用户自定义界面尺寸的应用场景中非常常见,如数据可视化的图表区域、可调整大小的编辑器窗口等。 这个示例采用了jQuery框架,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、...

    页面中浮动的DIV(可拖移)

    ### 页面中浮动的DIV(可拖移):深入解析与实现方法 在Web开发中,创建可拖动的元素是一项非常实用且常见的功能。本文将详细介绍如何通过HTML、CSS及JavaScript来实现页面中的一个可拖动的`<div>`元素,并深入探讨其...

    js实现编辑div节点名称的方法

    这个内嵌的`div`元素,`class`为`.noteText`,`id`为`noteTxt`,包含可编辑的文本。当用户双击这个`div`时,会触发`changeName`函数。 接下来,我们详细分析`changeName`函数: 1. 函数接收`noteTxtId`作为参数,...

    javascript窗体类似div窗体iframe+div窗体

    JavaScript窗体,或者说在网页中实现类似于传统窗体(如div窗体)的功能,是Web开发中的常见需求。这种技术通常结合HTML、CSS和JavaScript来创建动态、交互式的用户界面。在标题中提到的"iframe+div窗体",是指使用...

Global site tag (gtag.js) - Google Analytics