尝试用js控制的双击HTML文本变为input输入，目前代码为下:
<span ondblclick="exInput(this)">变成输入框</span>
<script>
function exInput(element) {
var text = element.innerText;
var input = document.createElement('input');
input.type = 'text';
input.value = text;
input.className = 'hidden-input';
element.parentNode.insertBefore(input, element);
element.style.display = 'none';
input.focus();
input.addEventListener('blur', function() {
var newValue = input.value;
element.innerText = newValue;
element.style.display = 'inline-block';
input.parentNode.removeChild(input);
});
}
</script>
测试了正常，有什么问题吗？
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！在开发过程中，一般都会有这样的需求，比如 输入框 只能输入数字，不能输入字母 文字 等。这就要对输入的东西进行验证。一提到 验证 就不得提到 正则 了，但本文不过多介绍正则，以本文的标题为主。
回答：
要实现双击操作将文本变为可编辑的输入框，可以使用JavaScript来动态修改HTML元素。
首先，在HTML中创建一个文本段落元素，用于显示文本：
<p id="text" ondblclick="makeEditable()"></p>
然后，在JavaScript中定义一个函数makeEditable()，该函数将该文本段落转换为可编辑的输入框：
function makeEditable() {
var textElement = document.getElementById("text");
var inputElement = document.createElement("input");
inputElement.value = textElement.innerHTML;
inputElement.addEventListener("blur", function() {
textElement.innerHTML = inputElement.value;
});
textElement.innerHTML = "";
textElement.appendChild(inputElement);
inputElement.focus();
}
在该函数中，首先获取文本段落元素和其内容。然后，创建一个新的输入框元素并将其值设置为当前文本段落的内容。接下来，添加一个blur事件监听器到输入框元素上，当失去焦点时，将输入框的值设置为文本段落的内容，从而更新文本值。然后，清空文本段落元素的内容，并将输入框元素作为其子元素添加到文本段落元素中，并将焦点设置在输入框上。
这样，当双击文本段落时，它将变为一个可编辑的输入框，当输入框失去焦点时，它将恢复为文本段落。
完整代码示例：
<!DOCTYPE html>
<html>
<head>
<title>双击文本变为输入框</title>
</head>
<body>
<p id="text" ondblclick="makeEditable()">双击我进行编辑</p>
<script>
function makeEditable() {
var textElement = document.getElementById("text");
var inputElement = document.createElement("input");
inputElement.value = textElement.innerHTML;
inputElement.addEventListener("blur", function() {
textElement.innerHTML = inputElement.value;
});
textElement.innerHTML = "";
textElement.appendChild(inputElement);
inputElement.focus();
}
</script>
</body>
</html>
这样，你就可以通过双击文本段落来将其转换为可编辑的输入框。当输入框失去焦点时，输入的值将会更新到文本段落中。