JS实现双击内容变为可编辑状态

在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框，并在此输入新的资料即可修改，无需再按确定按钮等。。

我在网上查了很多资料，但都有一个小bug，就是当获取焦点后，光标的位置在文本框内容是开始处，这样编辑时还需要用户再重新选择一下光标位置，这样的交互感觉不好；后来查到新的资料解决了此问题，希望可以帮助到更多的人。

代码部分：

注意：设置选择文本的内容或设置光标位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现双击编辑可修改状态</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script type="text/javascript">
  function ShowElement(element) {
    var oldhtml = element.innerHTML;
    //创建新的input元素
    var newobj = document.createElement('input');
    //为新增元素添加类型
    newobj.type = 'text';
    //为新增元素添加value值
    newobj.value = oldhtml;
    //为新增元素添加光标离开事件
    newobj.onblur = function() {
      element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
      //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
    }
    //设置该标签的子节点为空
    element.innerHTML = '';
    //添加该标签的子节点，input对象
    element.appendChild(newobj);
    //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
    newobj.setSelectionRange(0, oldhtml.length);
    //设置获得光标
    newobj.focus();
  }
</script>
</head>
<body>
  <dl>
    <dt>你的用户名:</dt>
    <dd ondblclick="ShowElement(this)">三人行</dd>
    <dt>你的个性档</dt>
    <dd ondblclick="ShowElement(this)">三人行，必有我师焉！</dd>
  </dl>
</body>
</html>

双击事件：ondblclick

以上所述是小编给大家介绍的JS实现双击内容变为可编辑状态，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js添加删除行和双击变文本框的脚本

    js添加删除行和双击变文本框---阿会楠练习作品 *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } function $(obj){ return document.getElementById

  • jquery.jstree 增加节点的双击事件代码

    jquery.jstree 增加节点的双击事件代码

    jsTree 是基于jquery的树插件,支持拖放.复制.删除.快捷键.多选.自定义节点图标.自定义右键菜单.跨页面保存状态等等,总之我想到的它基本上都有了,而且最值得表扬的是它让人感觉一点都不慢哦. jsTree有节点选择事件,即 复制代码 代码如下: .bind("select_node.jstree", function(e, data) { //alert(data.rslt.obj.attr("id") + ":" + data.rsl

  • javascript 单选按钮 单击选中 双击取消选择实现代码

    单选按钮,双击取消选中 window.onload = function() { // setRadio("myDiv", "form1", "alreadySelected"); var radios = document.getElementsByTagName("input"); for (var i = 0; i A: B: C: D: [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js修改table中Td的值(定义td的双击事件)

    客户需求至上. 这次是更改后的代码,去掉了"确定","取消"按钮.变单击为双击事件,用户按ESC键,取消更改. 复制代码 代码如下: //为每个Td添加双击事件 function ReWritable() { var tbmian=document.getElementById("tbmain"); //循环,为每行每列添加双击事件,但是,第一行(thead)与最后一行(tfoot)不添加. for(var i=1;i<tbmain.row

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

    javascript 双击文本框编辑功能代码 input.t {border:1px solid #fff;background:#fff;} input.s {border:1px solid #369;background:#fff;} var test = document.getElementById("test"); var mysubmit = document.getElementById("submit"); test.ondblclick = fu

  • Js实现双击鼠标自动滚动屏幕的示例代码

    如下所示: 复制代码 代码如下: <html><head> <script language="javascript" type="text/javascript">//双击鼠标滚动屏幕的代码var currentpos,timer;function initialize(){  timer=setInterval("scrollwindow()",30);}function sc(){  clearInter

  • 设置jsf的选择框h:selectOneMenu为不可编辑状态的方法

    1.js代码: 复制代码 代码如下: function init() { document.getElementById("studyPhase").disabled=true; } 2.h:selectOneMenu下拉框 复制代码 代码如下: <h:selectOneMenu id="studyPhase" value="#{schoolfellowInfoEdit.studyPhase}" > <f:selectItems

  • js jq 单击和双击区分示例介绍

    一:原理: 先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick: 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会.也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果

  • JS实现鼠标单击与双击事件共存

    一直都认为在Web开发中,双击事件都是少至又少地使用,直到最近项目需要,要在一个按钮上绑定单击与双击两件事件.开始也觉得不就是给按钮绑下两个事件而已罢了--只是后来才明白,是我想得太简单,在双击事件触发的同时也会触发单击的~囧 通过一番研究后,终于利用JS中"setTimeout"延时执行方法的办法,将单击延迟300毫秒执行才解决了,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • JS实现双击内容变为可编辑状态

    在一些网站上我们经常看到交互性很强的功能.一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等.. 我在网上查了很多资料,但都有一个小bug,就是当获取焦点后,光标的位置在文本框内容是开始处,这样编辑时还需要用户再重新选择一下光标位置,这样的交互感觉不好:后来查到新的资料解决了此问题,希望可以帮助到更多的人. 代码部分: 注意:设置选择文本的内容或设置光标位置 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

  • JS实现双击编辑可修改状态的方法

    JS实现双击编辑可修改状态的方法

    本文实例讲述了JS实现双击编辑可修改状态的方法.分享给大家供大家参考.具体如下: 这是现在流行的一个表单特效,在网页上单击某文字,文字变为编辑状态,或者是让输入新文字,这就是JavaScript控制表单的一个例子,下面的这段代码就实现了用户名和签名档的双击可编辑功能. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态.分享给大家供大家参考,具体如下: html部分: <table> <thead> <tr > <th width="40px;">序号</th> <th>班次</th> <th>分组</th> <th>操作</th> </tr> </thead>

  • editable.js 基于jquery的表格的编辑插件

    editable.js 基于jquery的表格的编辑插件

    我的思路是这样的: 1.对任何一个 table, tr 都可以添加编辑.删除功能--功能独立 2.可以自动的完成编辑.取消功能,如点击编辑, 表格内容自动变成编辑框.下拉框等, 点击取消结束编辑状态 3.添加删除.确定(即更新)事件--只需要添加自己服务端的删除.更新代码就可以 4.能够自定义设置可编辑列,不可编辑列--方便定制编辑功能 下面是我实现的功能代码: editable.js 复制代码 代码如下: /* code: editable.js version: v1.0 date: 201

  • 一样的table？不一样的table(可编辑状态table)

    新的一天开始了,生活还要继续,今天要和大家分享的是不一样的table,普通的table就用于显示数据,今天要分享的table不仅仅能显示数据,还可以对数据进行编辑,当鼠标点击数据时相应的数据格就变成可编辑的状态,废话不多说,进入今天的主题,首先完成HTML页面: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

  • UITableViewCell在编辑状态下背景颜色的修改方法

    UITableViewCell在编辑状态下背景颜色的修改方法

    本文主要介绍的是关于UITableViewCell在编辑状态下背景颜色的修改方法,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.先看下效果图 二.网上很多下面这种答案 UITableViewCell * cell = [tableView cellForRowAtIndexPath:indexPath]; cell.selectionStyle = UITableViewCellSelectionStyleNone; 这样设置,蓝色的选中图标也不会出现. 这种仅限于不编辑的时候,让Ta

  • 使用 Node.js 对文本内容分词和关键词抽取

    使用 Node.js 对文本内容分词和关键词抽取

    在讨论技术前先卖个萌,吃货的世界你不懂~~ 众成翻译的文章有 tag,用户可以基于 tag 来快速筛选感兴趣的文章,文章也可以依照 tag 关联来进行相关推荐.但是现在众成翻译的 tag 是在推荐文章的时候设置的,都是英文的,而且人工设置难免不规范和不完全.虽然发布文章后也可以人工编辑,但是我们也不能指望用户或管理员能够时时刻刻编辑出恰当的 tag,所以我们需要用工具来自动生成 tag. 在现在开源的分词工具里面,jieba是一个功能强大性能优越的分词组件,更幸运地是,它有 node 版本. n

  • vue.js实现双击放大预览功能

    本文实例为大家分享了vue.js实现双击放大预览的具体代码,供大家参考,具体内容如下 imgPreview组件 <template> <div class="vue-uploader" @keyup.esc.native="hide"> <div v-if="visible" @click.self="hide" class="img_model" > <div c

  • 使用 JS 复制页面内容的三种方案

    使用 JS 复制页面内容的三种方案

    目录 引言 方式一:Async Clipboard API 方式二:Document.execCommand API 复制 DOM 元素内容 复制 input 元素内容 方法三:覆写 copy 事件 引言 现在有很多第三方插件能够实现 copy 功能,但如果让我们自己去做,我们知道如何去实现吗? 这篇文章介绍三种实现方案. 方式一:Async Clipboard API 使用 Async Clipboard API 这种方式使用起来最简单,但兼容性不太好,而且要求比较多. 示例代码: const

随机推荐