提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

使用步骤

1.添加鼠标双击事件

代码如下（示例）：

οndblclick="ShowElement(this)"

代码如下（示例）：

<script>function ShowElement(element){var oldhtml = element.innerHTML;var newobj = document.createElement('input');
//创建新的input元素newobj.type = 'text';
//为新增元素添加类型newobj.onblur = function(){element.innerHTML = this.value ? this.value : oldhtml;
//当触发时判断新增元素值是否为空，为空则不修改，并返回原有值}element.innerHTML = '';element.appendChild(newobj);newobj.focus();}</script>

使用步骤

2.添加鼠标点击事件和失去焦点事件

代码如下（示例）：

<td><span id="span_${animal.animal_id}" value="${animal.animal_name}" οnclick="spanClick(${animal.animal_id})">${animal.animal_name}</span><input id="input_${animal.animal_id}" value="${animal.animal_name}" οnblur="inputBlur(${animal.animal_id})" style="display: none">
</td>

代码如下（示例）：

<script>function spanClick(id){//获取文本框inputObj = document.getElementById("input_"+id)//字符串拼接inputObj.style.display="";spanObj=document.getElementById("span_"+id)spanObj.style.display="none";inputObj.focus();//获得焦点}function inputBlur(id){//获取文本框inputObj = document.getElementById("input_"+id)//字符串拼接inputObj.style.display="none";//消除隐藏，显示文本框spanObj=document.getElementById("span_"+id)//字符串拼接spanObj.style.display="";spanObj.innerHTML=inputObj.value;})}
</script>

js双击编辑文本（单个）相关推荐

html双击变成可编辑状态,JS实现双击编辑可修改状态的方法
本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表 ...
JS单击/双击编辑功能
JS单击/双击编辑功能 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset ...
Microsoft Word教程：如何在 Word 中创建文档、添加和编辑文本？
欢迎观看 Microsoft Word 教程,小编带大家学习 Microsoft Word 的使用技巧,了解如何在 Word 中创建文档.添加和编辑文本. 创建文档,打开 Word,选择「空白文档」. ...
jeecg双击编辑的几种格式
1.在datagrid的里可以使用jeecg带的双击编辑事件 2.添加双击编辑方法onDblClick="db_edit(rowIndex,rowData)" //双击编辑行 fu ...
Microsoft Word教程「1」，如何在 Word 中创建文档、添加和编辑文本？
欢迎观看 Microsoft Word 教程,小编带大家学习 Microsoft Word 的使用技巧,了解如何在 Word 中创建文档.添加和编辑文本. 创建文档,打开 Word,选择「空白文档」. ...
linux vim编辑文本是 m,linux基础命令介绍四：文本编辑 vim
本文介绍vim(版本7.4)的一般用法 vim是功能强大的文本编辑器,是vi的增强版. vim [options] [file ..] 使用vim编辑一个文件的最常用命令就是: vim file 其中 ...
html禁止双击选中文本,CSS阻止页面双击选中文本
在双击左右箭头,快速切换图片滚动时,会选择附近区域的文字,感觉不是很好,今天在同事在分享时,讲到了这个问题, 试了一下,不错,解决了问题 IE及Chrome下的方法一样,对相应的元素添加onselec ...
PMEdit一个富文本框可以编辑文本、并可以显示GIF动画
PMEdit一个富文本框可以编辑文本.并可以显示GIF动画发布时间:2013-04-14 发布来源: 护士必必要有同情心和一双愿意工作的手. 一.在开端之前起首吐槽一下,本人是一个自力开辟者,在中国 ...
php去除编辑器html标签,js处理富文本编辑器转义、去除转义、去除HTML标签
富文本编辑器生成的HTML标签,进行转义,然后写入数据库,防止脚本注入: function htmlEncode(value){ return $(' } 从数据库拿出的转义后的HTML标签内容,先得 ...

js双击编辑文本（单个）

使用步骤

1.添加鼠标双击事件

使用步骤

2.添加鼠标点击事件和失去焦点事件

js双击编辑文本（单个）相关推荐

最新文章

热门文章