JS 实现双击编辑


原始 HTML代码：

<!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>


原始 页面效果：

vue实现双击编辑_实现


JS代码：

<!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实现双击编辑_双击_02


VUE 实现双击编辑


代码：

<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>



效果：

vue实现双击编辑_js _03


当然，这种效果在实际应用中可能不太友好，我们也可以用按钮来控制

vue实现双击编辑_双击_04