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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
创建一个类Person的简单实例
May 17 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
Dec 13 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
原生JS实现的雪花飘落动画效果
May 03 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php 生成WML页面方法详解
2009/08/09 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
php面向对象 字段的声明与使用
2012/06/14 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
javascript jQuery插件练习
2008/12/24 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
js脚本实现数据去重
2014/11/27 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
js实现分割上传大文件
2016/03/09 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
js中let能否完全替代IIFE
2019/06/15 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
简单了解python gevent 协程使用及作用
2019/07/22 Python
python 叠加等边三角形的绘制的实现
2019/08/14 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
Python绘图实现显示中文
2019/12/04 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python面向对象实现方法总结
2020/08/12 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
H5仿微信界面教程(一)
2017/07/05 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
PHP面试题附答案
2015/11/28 面试题
药学职务聘任书
2014/03/29 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
精神文明建设标语
2014/06/16 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
避暑山庄导游词
2015/02/04 职场文书
史上最牛辞职信
2015/05/13 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
2019送给家人们的中秋节祝福语
2019/08/15 职场文书
解决Laravel使用验证时跳转到首页的问题
2021/11/17 PHP