在网页开发中，我们经常会遇到需要将原本的<input>输入字段替换为可交互的<p>段落元素的场景，比如编辑态和展示态切换的需求，同时还要支持多个可交互元素之间的焦点切换，提升用户操作体验。下面我们就一步步实现这个功能。
核心实现思路
整个功能的实现可以分为三个核心步骤：首先是替换原有的输入字段为段落元素，然后给段落元素添加可交互属性和焦点状态样式，最后监听键盘事件实现焦点在多个元素之间的切换。
1. 替换输入字段为段落元素
我们可以通过遍历页面中需要替换的<input>元素，创建对应的<p>元素，将输入字段的值赋值给段落元素，再替换掉原有的输入字段。
<!-- 初始的HTML结构 --> <div class="container"> <input type="text" class="editable-input" value="第一个内容"> <input type="text" class="editable-input" value="第二个内容"> <input type="text" class="editable-input" value="第三个内容"> </div>
对应的替换逻辑代码如下：
// 获取所有需要替换的输入字段
const inputList = document.querySelectorAll('.editable-input');
// 存储替换后的段落元素，用于后续焦点切换
const paragraphList = [];
inputList.forEach((input, index) => {
// 创建段落元素
const p = document.createElement('p');
// 设置段落内容
p.textContent = input.value;
// 添加可交互的标识类
p.classList.add('editable-paragraph');
// 设置tabindex让段落元素可以获取焦点
p.setAttribute('tabindex', index + 1);
// 替换原有输入字段
input.parentNode.replaceChild(p, input);
// 存入数组
paragraphList.push(p);
});
2. 给段落元素添加样式和交互逻辑
为了让段落元素看起来是可交互的，我们需要添加对应的CSS样式，同时可以给它绑定点击事件，实现点击进入编辑态的逻辑，如果有需要的话可以再切换回输入字段。
/* 可交互段落的默认样式 */
.editable-paragraph {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
outline: none;
}
/* 获取焦点时的样式 */
.editable-paragraph:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
/* 鼠标悬停样式 */
.editable-paragraph:hover {
background-color: #f5f7fa;
}
3. 实现焦点切换逻辑
焦点切换通常通过键盘的Tab键或者上下方向键实现，我们监听段落元素的键盘事件，根据按下的按键来切换焦点到上一个或者下一个段落元素。
// 给每个段落元素添加键盘事件监听
paragraphList.forEach((p, index) => {
p.addEventListener('keydown', (e) => {
// 按下Tab键切换焦点
if (e.key === 'Tab') {
e.preventDefault();
// 判断是向前还是向后切换
if (e.shiftKey) {
// shift+tab 切换到上一个元素
const prevIndex = index === 0 ? paragraphList.length - 1 : index - 1;
paragraphList[prevIndex].focus();
} else {
// 单独tab 切换到下一个元素
const nextIndex = index === paragraphList.length - 1 ? 0 : index + 1;
paragraphList[nextIndex].focus();
}
}
// 按下上下方向键也可以切换焦点
if (e.key === 'ArrowUp') {
e.preventDefault();
const prevIndex = index === 0 ? paragraphList.length - 1 : index - 1;
paragraphList[prevIndex].focus();
}
if (e.key === 'ArrowDown') {
e.preventDefault();
const nextIndex = index === paragraphList.length - 1 ? 0 : index + 1;
paragraphList[nextIndex].focus();
}
});
});
完整示例代码
下面是将所有逻辑整合在一起的完整代码，可以直接复制到HTML文件中运行查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>替换输入字段为可交互段落</title>
<style>
.editable-paragraph {
padding: 8px 12px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
outline: none;
}
.editable-paragraph:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.editable-paragraph:hover {
background-color: #f5f7fa;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="editable-input" value="第一个内容">
<input type="text" class="editable-input" value="第二个内容">
<input type="text" class="editable-input" value="第三个内容">
</div>
<script>
const inputList = document.querySelectorAll('.editable-input');
const paragraphList = [];
inputList.forEach((input, index) => {
const p = document.createElement('p');
p.textContent = input.value;
p.classList.add('editable-paragraph');
p.setAttribute('tabindex', index + 1);
input.parentNode.replaceChild(p, input);
paragraphList.push(p);
});
paragraphList.forEach((p, index) => {
p.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
e.preventDefault();
if (e.shiftKey) {
const prevIndex = index === 0 ? paragraphList.length - 1 : index - 1;
paragraphList[prevIndex].focus();
} else {
const nextIndex = index === paragraphList.length - 1 ? 0 : index + 1;
paragraphList[nextIndex].focus();
}
}
if (e.key === 'ArrowUp') {
e.preventDefault();
const prevIndex = index === 0 ? paragraphList.length - 1 : index - 1;
paragraphList[prevIndex].focus();
}
if (e.key === 'ArrowDown') {
e.preventDefault();
const nextIndex = index === paragraphList.length - 1 ? 0 : index + 1;
paragraphList[nextIndex].focus();
}
});
});
</script>
</body>
</html>
注意事项
- 给段落元素设置
tabindex属性是实现焦点获取的关键，没有这个属性段落元素默认是无法获取焦点的。 - 在切换焦点时需要调用
preventDefault()阻止默认行为，避免浏览器默认的Tab跳转逻辑干扰我们的自定义切换。 - 如果页面中有其他可聚焦元素，需要合理设置
tabindex的值，避免焦点切换顺序混乱。
HTMLJavaScriptDOM操作焦点切换修改时间：2026-06-16 09:30:38