html+input+js双击,JS双击变input框批量修改内容
时间: 2023-08-16 13:07:08 浏览: 42
您可以通过以下步骤实现这个功能:
1. 在 HTML 中创建一个 input 元素,设置它的类型为文本,然后将它隐藏起来。
```html
<input type="text" style="display:none;" id="input-box">
```
2. 在需要实现双击修改的元素上添加一个双击事件,当用户双击这个元素时,触发该事件。
```html
<div ondblclick="editContent()">双击修改内容</div>
```
3. 编写 JavaScript 函数 editContent(),该函数将当前元素的内容复制到隐藏的 input 元素中,并将其显示出来供用户编辑。
```javascript
function editContent() {
var content = event.target.innerText;
var inputBox = document.getElementById("input-box");
inputBox.value = content;
inputBox.style.display = "inline";
}
```
4. 在 input 元素上添加一个失去焦点事件,当用户完成编辑并离开 input 元素时,触发该事件。
```html
<input type="text" style="display:none;" id="input-box" onblur="updateContent()">
```
5. 编写 JavaScript 函数 updateContent(),该函数将 input 元素中的内容复制回当前元素中,并隐藏 input 元素。
```javascript
function updateContent() {
var content = event.target.value;
var target = document.querySelector(":focus");
target.innerText = content;
event.target.style.display = "none";
}
```
这样,当用户双击一个元素时,它将被替换为一个 input 元素,用户可以在其中编辑内容。当用户完成编辑并离开 input 元素时,它将被替换回原始元素。