Javascript 如何改变一切<；输入>；通过单击按钮并稍后将其更改回其值？

问题：我有一个包含许多

字段的页面（只需说所有字段都是文本字段） 我想有一个按钮，当点击它，所有的输入字段将成为纯文本只。 e、 g.

变为123 如果我点击另一个按钮，文本将变回 e、 g.123变为

是否有一种自动方式可以扫描所有

并使用javascript和jquery一次性更改它们

谢谢大家!

---

编辑 看来你们误会了。 再次阅读我写的内容：例如，

变为123

我已经有value=“123”了，为什么要再次设置该值

我想要的是

---

变为

123456

，然后

123456

返回到

使用此选项单程

$('input').replaceWith(function(){
    return $('<div />').text(this.value).addClass('plain-text');
});​​​

$（'input'）。替换为（函数（）{
返回$（''）.text（this.value）.addClass（'plain-text'）；
});​​​

这件去另一件

$('.plain-text').replaceWith(function(){
    return $('<input />').val($(this).text());
});

$（'.plain text'）.replaceWith（函数（）{
返回$（''）.val（$（this.text（））；
});

---

​

用这个单程

$('input').replaceWith(function(){
    return $('<div />').text(this.value).addClass('plain-text');
});​​​

$（'input'）。替换为（函数（）{
返回$（''）.text（this.value）.addClass（'plain-text'）；
});​​​

这件去另一件

$('.plain-text').replaceWith(function(){
    return $('<input />').val($(this).text());
});

$（'.plain text'）.replaceWith（函数（）{
返回$（''）.val（$（this.text（））；
});

---

​

您需要为每个输入创建一个隐藏元素，然后使用jquery隐藏输入，显示隐藏元素并为其提供输入值

<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>

$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

$（“#div_1”）.html（$（$（“input_1”）.val（））；
$（“#输入_1”）.hide（）；
$（“#div_1”）.show（）；

您需要为每个输入创建一个隐藏元素，然后使用jquery隐藏输入，显示隐藏元素并为其提供输入值

<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>

$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();

$（“#div_1”）.html（$（$（“input_1”）.val（））；
$（“#输入_1”）.hide（）；
$（“#div_1”）.show（）；

试试看

$（函数（）{
var-arr=[]；
$（'#btn'）。在（'click'，function（）上{
var$text=$（'#inp input[type=“text”]”）；
如果（$text.length>0）{
$text.每个（功能（i）{
arr[i]=该值；
});
$（'#inp'）.html（arr.join（））；
}
否则{
如果（arr.length尝试

$（函数（）{
var-arr=[]；
$（'#btn'）。在（'click'，function（）上{
var$text=$（'#inp input[type=“text”]”）；
如果（$text.length>0）{
$text.每个（功能（i）{
arr[i]=该值；
});
$（'#inp'）.html（arr.join（））；
}
否则{
如果（arr.length检查此链接

HTML:





​

Javascript:
$（“#btnPlain”）.bind（'click'，function（）{
$（“#明文”）.html（“”）；
$（“#输入[类型=文本]”）。每个（函数（索引）{
$（“#明文”）.append（“”+$（this.val（）+“”）；
$（“#divInput”）.hide（）；
$（“#明文”）.show（）；
});
});
$（“#btnInput”）.bind（'click'，function（）{
$（“#divInput”）.html（“”）；
$（“#纯文本跨度”）。每个（函数（索引）{
$（“#divInput”）.append（“
”）；
$（“#明文”）.hide（）；
$（“#divInput”）.show（）；
});
});

​
 检查此链接

HTML:





​

Javascript:
$（“#btnPlain”）.bind（'click'，function（）{
$（“#明文”）.html（“”）；
$（“#输入[类型=文本]”）。每个（函数（索引）{
$（“#明文”）.append（“”+$（this.val（）+“”）；
$（“#divInput”）.hide（）；
$（“#明文”）.show（）；
});
});
$（“#btnInput”）.bind（'click'，function（）{
$（“#divInput”）.html（“”）；
$（“#纯文本跨度”）。每个（函数（索引）{
$（“#divInput”）.append（“
”）；
$（“#明文”）.hide（）；
$（“#divInput”）.show（）；
});
});

​
 不。我不想设置
的值。我希望
成为它的值！您需要以某种方式存储有关
输入
元素的信息，因为仅从数据123456您无法知道它是应该变成123和456还是例如12345和6–当然，您也不知道应该变成
哪些字符>输入
元素及其属性。信息可以存储在标记或变量中。问题的公式似乎排除了标记，因此您需要有效地创建文档结构的副本。我想知道原始问题是什么。它可能有一个更简单的解决方案。不，我不想设置值我希望
成为它的值！您需要以某种方式存储有关
输入
元素的信息，因为仅从数据123456，您无法知道它是否应该变成123和456，或者例如12345和6–当然，您也不知道将哪些字符转换为
输入
元素以及在什么位置要放入其中的属性。信息可以存储在标记或变量中。问题的公式似乎排除了标记，因此您需要有效地创建文档结构的副本。我想知道原始问题是什么。它可能有一个更简单的解决方案。您应该始终将代码复制到您的答案中，因为JSFIDLE可能不会永远存在。非常感谢，这肯定有效，但我不想为
保留单独的
。您应该始终将代码复制到您的答案中，因为JSFIDLE可能不会永远存在。非常感谢，这肯定有效，但我不想为
保留单独的
s.非常感谢！但这超出了我的理解范围…很抱歉，其他人可能会很好地使用您的代码。非常感谢！但这超出了我的理解范围…很抱歉，其他人可能会很好地使用您的代码。谢谢！稍加调整，使用replaceWith添加新类的概念“拯救我的一天”。谢谢！稍加修改tweak，使用replaceWith save my day添加新类的概念。