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


Posted in Javascript onMarch 03, 2017

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

我在网上查了很多资料,但都有一个小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实现双击内容变为可编辑状态,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
js获取Get值的方法
Sep 29 Javascript
vuejs指令详解
Feb 07 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 #Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 #Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 #Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
You might like
php 网页游戏开发入门教程一(webgame+design)
2009/10/26 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
取得传值的函数
2006/10/27 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
2018/06/28 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
python实现批量下载新浪博客的方法
2015/06/15 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
opencv改变imshow窗口大小,窗口位置的方法
2018/04/02 Python
python Opencv计算图像相似度过程解析
2019/12/03 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
Python使用Pygame绘制时钟
2020/11/29 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
浪费资源的建议书
2014/03/12 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2015年科室工作总结
2015/04/10 职场文书
追悼会悼词大全
2015/06/23 职场文书
《正比例》教学反思
2016/02/23 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
swagger如何返回map字段注释
2021/07/03 Java/Android
java多态注意项小结
2021/10/16 Java/Android