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

JavaScript实现双击编辑

    博客分类：
  • JS
JavaScriptXHTMLHTML 
阅读更多
其实就是元素的替代 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>无标题文档</title>
<style>
input.a {border:1px solid #fff;background:#fff;}
input.b {border:1px solid #369;background:#fff;}
</style>
</head>
<body>
<input type="text" id="test" readonly value="这里是标题" class="a"  />
<input type="submit" id="submit" value="修改" style="display:none;" />
<input type="text" id="ttt" readOnly value="这里测试2" class="a"/>
<script type="text/javascript">
var test = document.getElementById("test");
var mysubmit = document.getElementById("submit");
test.ondblclick = function(){
	this.readOnly = false;
 	this.className = "b";
 	mysubmit.style.display = "";
}
mysubmit.onclick = function(){
	test.readOnly = true;
 	test.className = "a";
 	this.style.display = "none";
}
var ttt = document.getElementById("ttt");
ttt.ondblclick = function(){
	this.readOnly = false;
	this.className = "b";
}
ttt.onblur = function(){
	this.readOnly = true;
	this.className = "a";
}

</script>
</body></html>
分享到：
| JavaScript时间选择控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于vue、iview实现tree组件可拖拽、双击编辑

    在这个场景下，我们将探讨如何利用Vue和IView实现一个具有拖拽和双击编辑功能的Tree组件。 首先，让我们了解一下`Tree`组件。在Web应用中，`Tree`组件通常用于展示层级关系的数据，如文件系统、组织结构等。IView中...

    raphael实现双击实现动态编辑文字

    为了实现双击编辑功能，我们需要监听文本元素的`dblclick`事件。当用户双击文字时，可以将文本元素转换为一个输入框，让用户编辑。这里需要使用Raphaël的`elementToSVG`方法来获取元素的SVG表示，然后将其转换为...

    双击文字后实现编辑文本功能.rar

    接着，为了实现双击激活编辑的功能，我们需要监听`dblclick`（双击）事件。在JavaScript中，我们可以为指定元素绑定该事件，如下所示： ```javascript document.getElementById('editable-text').addEventListener...

    比较简单的javascript实现input双击后可以编辑

    ### 比较简单的JavaScript实现input双击后可以编辑 #### 背景与需求 在Web开发中，经常会遇到需要使某个输入框（`&lt;input&gt;`）在默认情况下不可编辑（即处于只读状态），但用户可以通过某种交互操作（比如双击）使其...

    javascript 双击文本框编辑功能代码

    通过JavaScript实现的“双击编辑”功能恰好满足了这一需求。当用户双击某个显示为文本的元素时，该元素会变为可编辑状态（通常表现为文本框），用户可以直接进行修改。 #### 二、技术实现原理 要实现上述功能，...

    仿iGoogle双击编辑-网页拖动完整实例

    3. **JavaScript**：是实现交互性功能的关键，包括双击编辑和拖放功能。JavaScript库如jQuery或原生的DOM操作可以处理用户的双击事件，打开编辑模式；而HTML5的`draggable`属性或第三方库如jQuery UI的Draggable插件...

    双击表格即时编辑

    这样，只需要调用这个组件，就可以快速在任何表格中启用双击编辑功能。例如，如果使用React框架，可以创建一个名为`EditableTableCell`的组件，处理所有的逻辑，然后在表格的`td`元素中使用该组件。 总的来说，...

    .net 双击td可以编辑

    标题中的".net 双击td可以编辑"是一个关于.NET框架下使用JavaScript实现表格（table）单元格（td）双击编辑功能的技术点。在Web应用中，用户界面的交互性通常是一个关键因素，允许用户通过双击某个元素来激活编辑...

    动态删除表格行、列、双击编辑.rar

    "动态删除表格行、列、双击编辑"的主题涉及到JavaScript编程、HTML和CSS等技术的应用，旨在实现用户交互性强、灵活多变的表格功能。下面将详细介绍这些知识点。 首先，动态删除表格行和列是Web应用中增强用户体验的...

    js实现双击单元格变文本框

    ### JavaScript 实现表格单元格双击变为可编辑文本框 #### 概述 在Web开发中，有时我们需要让用户能够方便地编辑表格中的数据。一种常见的做法是通过双击表格单元格将其转换为一个可编辑的文本框。这种方法既提高...

    Ajax仿iGoogle双击编辑-网页拖动完整实例

    **Ajax仿iGoogle双击编辑-网页拖动完整实例** 在Web开发中，Ajax（Asynchronous JavaScript and XML）技术被广泛用于创建动态、交互性强的网页应用。本实例旨在模仿iGoogle的用户界面和功能，其中包括双击编辑和...

    jQuery 实现双击编辑表格功能

    本文将深入探讨如何利用jQuery实现双击编辑表格的功能，这是一个常见的交互设计，能够提升用户体验，使用户能够快速更新表格中的数据。 首先，让我们看看实现这个功能的基本步骤： 1. **监听双击事件**： 使用...

    bootstrap table实现双击可编辑、添加、删除行功能

    "bootstrap table实现双击可编辑、添加、删除行功能" Bootstrap Table是基于Bootstrap的表格插件，提供了丰富的功能和高效的渲染性能。今天，我们将详细介绍如何使用Bootstrap Table实现双击可编辑、添加、删除行...

    怎么实现在表格中双击两下就可对里面的内容进行修改

    对于网页中的表格，例如HTML `&lt;table&gt;`元素，可以通过JavaScript监听`dblclick`事件来实现双击编辑。以下是一个简单的示例： ```html &lt;!-- 表格内容 --&gt; document.getElementById('myTable')....

    双击域实现

    在IT领域，"双击域实现"通常是指一种交互设计技术，它允许用户在特定的输入区域（如文本框或下拉菜单）上执行双击操作来触发特定的功能或事件。这种技术常用于提高用户体验，使得用户能更快地访问或编辑信息。在...

    Jquery案例 之 双击编辑异步更新

    本案例“Jquery案例 之 双击编辑异步更新”主要探讨了如何利用jQuery实现表格或其他元素的双击编辑功能，并通过异步方式更新数据到服务器。以下是关于这个主题的详细知识讲解。 首先，我们需要了解双击编辑的基本...

    jquery php+mysql 表格双击可编辑,表单失去焦点自动提交保存数据

    2. **双击编辑**：在前端，当用户双击表格的某个单元格时，jQuery会捕获这个事件，将单元格内容转换为可编辑的表单输入，这通常通过添加`contenteditable`属性到HTML元素来实现。双击编辑功能提高了用户体验，使得...

Magicbox
Global site tag (gtag.js) - Google Analytics