当前位置:首页 »“秋了秋”个人博客 » 前端编程 » Js点击文字实时修改内容

Js点击文字实时修改内容

作者:秋了秋 发表时间:2016年06月07日

网页中可以输入和修改文字的方式就是输入框,包括input和textarea,除此之外就只有通过js来实现。在一个网页中需要展示用户数据的时候,我们又不想使用输入框,而是用普通文本展示。那么js上战场了~

5201314

比如用这么一段html代码:

<div id="edit_line">
   <span class="edit_input">5201314</span><button class="edit">编辑</button>
</div>

要实现点击“编辑”就把前面的文字修改并保存。jq代码为(注释如下):

$("#edit_line").on("click",".edit",function(){//点击编辑的操作(动态绑定,作用于动态生成的HTML)
   var origin=$(this).parent().find(".edit_input");//找到要修改文本的容器节点
   var text=origin.text();//保存下初始文本
   origin.remove();//移除这个节点
   var input=$("<input>");//创建一个input
   input.attr("class","edit_input").attr("value",text);//给这个input指定class并把初始值赋给它的value
   $(this).parent().prepend(input);//插到父容器的前面
   input.focus();//把光标移动到input上
   $(this).removeClass("edit").addClass("confirm").text("确定");//修改class和button的文字
}).on("click",".confirm",function(){//点击确定的操作
   var change=$(this).parent().find(".edit_input");//找到input的节点
   var value=change.val();//获取修改后的值
   //do some post action here!(发送一个请求保存到数据库)
   change.remove();//移除这个input
   var span=$("<span/>");//创建一个span标签
   span.attr("class","edit_input").text(value);//修改它的class和文本内容为用户输入的内容
   $(this).parent().prepend(span);//插到父容器前面
   $(this).removeClass("confirm").addClass("edit").text("编辑");//修改class和button的文字
}).on("keyup",".edit_input",function(e){//输入后按回车键保存功能
   var e=e||window.event;
   if(e.keyCode==13){
      $("#edit_line").find(".confirm").click();//调用上面的“确定”点击事件
   }
}).on("click","span.edit_input",function(){//直接点击文字也可以编辑
   $("#edit_line").find(".edit").click();//调用上面的“编辑”点击事件
})
6
文章作者: “秋了秋”个人博客,本站鼓励原创。
转载请注明本文地址:http://www.mizuiren.com/blog/445.html
目录: 前端编程标签: JS点击修改文字 9125次阅读

请求播放音乐,请点击播放

登 录
点击获取验证码
还没账号?点击这里