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>
原始 页面效果：
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 实现双击编辑
代码：
<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>
效果：
当然，这种效果在实际应用中可能不太友好，我们也可以用按钮来控制
时间： 2024-10-11 22:35:25