本文共 3254 字，大约阅读时间需要 10 分钟。
JS 实现双击编辑
原始 HTML代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < meta http-equiv = "X-UA-Compatible" content = "ie=edge" > < title >Document</ title > </ head > < body > < div class = "form-group" > < label >姓名：</ label > < span >张三</ span > </ div > < div class = "form-group" > < label >个人介绍：</ label > < span >我就是我，颜色不一样的烟火！</ span > </ div > </ body > </ html > |
原始 页面效果：
JS代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1.0" > <meta http-equiv= "X-UA-Compatible" content= "ie=edge" > <title>Document</title> </head> <body> <div class= "form-group" > <label>姓名：</label> <span ondblclick= "edit(this)" >张三</span> </div> <div class= "form-group" > <label>个人介绍：</label> <span ondblclick= "edit(this)" >我就是我，颜色不一样的烟火！</span> </div> <script> function edit (element) { // 获取要编辑的文本内容 var oldHtml = element.innerHTML; // 创建一个新的 input 输入框 var newInput = document.createElement( 'input' ); // 为新的 input添加属性 newInput.type = "text" ; newInput.value = oldHtml; // 清空当前元素的文本内容 element.innerHTML = '' ; // 把新的 input 框 追加到当前元素节点中 element.appendChild(newInput); // 设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置） newInput.setSelectionRange(0, oldHtml.length) // 为新 input 框获取焦点 newInput.focus(); // 为新的 input 添加失去焦点事件 newInput.onblur = function () { // 判断失去焦点时，input 框的值是否与原值相同，相同则表示没有修改，返回原值；不同则表示有改动，返回新值 element.innerHTML = this .value == oldHtml? oldHtml : this .value; } } </script> </body> </html> |
效果：
VUE 实现双击编辑
代码：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | < template > < div > < div class = "table-responsive" > < table class = "table table-bordered" > < thead > < tr > < th >姓名</ th > < th >性别</ th > </ tr > </ thead > < tbody > < tr v-for = "item in list" > < td > < span v-if = "!editing" @ dblclick = "edit" >`item`.`wenzi`</ span > < input type = "text" class = "form-control" ref = "input" v-if = "editing" :value = "item.wenzi" v-model = "item.wenzi" @ blur = "save" > </ td > < td > < span v-if = "!editing" @ dblclick = "edit" >`item`.`gender`</ span > < input type = "text" class = "form-control" ref = "input" v-if = "editing" :value = "item.gender" v-model = "item.gender" @ blur = "save" > </ td > </ tr > </ tbody > </ table > </ div > </ div > </ template > < script type = "text/ecmascript-6" > export default { data: function () { return { editing: false, list: [ {wenzi: '迪热力巴', gender: '女性'}, {wenzi: '鹿晗', gender: '男性'}, ], } }, methods: { edit: function () { this.editing = true this.$nextTick(function () { this.$els.input.focus() }) }, save: function () { this.editing = false } } } </ script > < style lang = "scss" rel = "stylesheet/scss" scoped> </ style > |
效果：
当然，这种效果在实际应用中可能不太友好，我们也可以用按钮来控制
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1949914
转载地址：http://kncxo.baihongyu.com/