通过js实现单击或双击直接修改内容

简介: 通过js实现单击或双击直接修改内容

span标签:

<span   class="text-info" id="pay_type" οndblclick='edit(this,this.id)'>{if !empty($data['pay_type'])}{$data['pay_type']}{else /}双击文字修改{/if}</span>

js代码:

function edit(element,datas){
      var datas = datas;
     var oldhtml = element.innerHTML;//获得元素之前的内容
     var newobj = document.createElement('input');//创建一个input元素
     newobj.type = 'text';//为newobj元素添加类型
      newobj.value=oldhtml;
     element.innerHTML = '';   //设置元素内容为空
     element.appendChild(newobj);//添加子元素
     newobj.focus();//获得焦点
      //设置newobj失去焦点的事件 
     newobj.onblur = function(){
           //下面应该判断是否做了修改并使用ajax代码请求服务端将id与修改后的数据提交 name=John&location=Boston
           var name = newobj.value;
           // alert("id="+{$id}+"&"+datas+"="+name);
            $.ajax({
               type: "POST",
               url: "/admin/order/design_update.php",
               data: "id="+{$id}+"&"+datas+"="+name,
               dataType: "json",
               success: function(msg){
                 if(msg==1){
                    alert('修改成功');
                 }else{
                    alert('修改失败');
                 }
               }
            });
          //当触发时判断newobj的值是否为空,为空则不修改,并返回oldhtml
          element.innerHTML = this.value ? this.value : oldhtml;
       }
    }

 

参考:https://www.cnblogs.com/zx98/p/5824552.html


目录
相关文章
|
2月前
|
JavaScript 前端开发
JS判断点击是单击还是双击
如何使用JavaScript判断用户点击是单击还是双击。
40 0
|
3月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
20 1
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
【Three.js入门】处理动画、尺寸自适应、双击进入/退出全屏(Clock跟踪时间,Gsap动画库,自适应画面,进入/退出全屏)
151 0
|
前端开发 JavaScript
前端:JS实现双击table单元格变为可编辑状态
前端:JS实现双击table单元格变为可编辑状态
429 0
|
JavaScript 前端开发
js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
原文:js实现移动端图片预览:手势缩放, 手势拖动,双击放大... 前言本文将介绍如何通过js实现移动端图片预览,包括图片的 预览模式,手势缩放,手势拖动,双击放大等基本功能; 扫码查看示例效果: 代码地址http://pangyongsheng.github.io/imgPreview/ 一、功能介绍   图片预览主要有以下几个功能点组成: 监听图片点击事件,进入图片预览模式 自定义手势事件, (双指缩放,滑动,双击。
3242 0
|
存储 JavaScript 前端开发
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
804 0
|
JavaScript 前端开发
JavaScript双击不选中文字
JavaScript双击不选中文字
422 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2